React-mise NPM

React Mise

Intuitive, type safe and flexible Store for React

💡 Intuitive
🔑 Type Safe
🔌 Extensible
🏗 Modular by design
📦 Extremely light

React Mise works both for React ^12

Mise (kanji: 店) pronounced mi'se which means store in Japanese. combined React Mise means the store for React.

👉 Demo with React on StackBlitz

Help me keep working on this project 💚

FAQ

A few notes about the project and possible questions:

Q: Is React Mise the successor of Redux?

A: Yes

Q: What about dynamic modules?

A: Dynamic modules are not type safe, so instead we allow creating different stores that can be imported anywhere

Roadmap / Ideas

Should the state be merged at the same level as actions and getters?
You can directly call useOtherStore() inside of a getter or action.
~~Getter with params that act like computed properties ~~ Can be implement through a custom composable and passed directly to state.

Installation

yarn add react-mise
# or with npm
npm install react-mise
# or with pnpm
pnpm add react-mise

Usage

Install the plugin

No need for global object. you don't need something like Provider like Redux or React hooks. it makes the application silly when you need to use multiple stores for 1 component.

Create a Store

You can create as many stores as you want, and they should each exist in different files:

import { defineStore } from "react-mise"

// main is the name of the store. It is unique across your application
// and will appear in devtools
export const useMainStore = defineStore("main", {
  // a function that returns a fresh state
  state: () => ({
    counter: 0,
    name: 'Eduardo',
  }),
  // optional getters
  getters: {
    // getters receive the state as first parameter
    doubleCount: (state) => state.counter * 2,
    // use getters in other getters
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    },
  },
  // optional actions
  actions: {
    increment() {
      this.counter++
    },
    reset() {
      // `this` is the store instance
      this.counter = 0
    },
  },
})

defineStore returns a function that has to be called to get access to the store (in component):

import { useMainStore } from "src/stores/main"

export default function App() {
  const [mainStore] = useMainStore()

  return (
    <>
      Counter: {mainStore.counter} <br />
      Double counter: {mainStore.double} <br />

      <button onClick={counterStore.increment}>counter++</button>
      <button onClick={counterStore.reset>reset</button>
    </>
  )
}

useStore without in component:

import { useMainStore } from "src/stores/main"

const mainStore = ussMainStore(true)

watch store

import { useMainStore } from "src/stores/main"

const mainStore = ussMainStore(true)

watch(mainStore, () => console.log("main store changed"), { deep: true })