Intuitive, type safe and flexible Store for React
npm install 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.
- Follow on GitHub
- Follow on Twitter
---
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
- [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.
``bash`
yarn add react-miseor with npm
npm install react-miseor with pnpm
pnpm add react-mise
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.
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}
>
)
}
`
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 })
``
To learn more about React Mise, check its documentation.