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 💚

- Follow on GitHub
- Follow on Twitter

---

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

- [x] Should the state be merged at the same level as actions and getters?
- [x] 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

``bash
yarn add react-mise


or with npm

npm install react-mise

or with pnpm

pnpm add react-mise
`

Usage

$3

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.

$3

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

`ts
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):

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

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

return (
<>
Counter: {mainStore.counter}

Double counter: {mainStore.double}


counter++
reset

)
}
`

useStore without in component:

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

const mainStore = ussMainStore(true)
`

watch store

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

const mainStore = ussMainStore(true)

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

Documentation

To learn more about React Mise, check its documentation.

License

MIT

https://react-mise.js.org