React-reex
React-reex is a lightweight global state management solution for React and React-native. It depends on React and doesn't use React Context API but only based on useState hook
Documentation
Please see official website
Installation
a. YARN
yarn add react-reex@latest
b. NPM
npm install react-reex@latest --save
Usage
a. CreateModule
In /store/counter/index.ts
import { createModule } from "react-reex"
const counterStore = createModule({
name: "counter",
state() {
return {
count: 0,
}
},
getters: {
double() {
return this.count * 2
},
},
actions: {
increment() {
this.commit("setCount", this.count + 1)
},
decrement(v: number) {
this.count--
},
},
mutations: {
setCount(value: number) {
this.count = value
},
},
events: {
count: {
handler(value) {
console.log("Count has changed", value)
},
},
},
})
export default counterStore
b. CreateStore
In /store/index.ts
import { createStore } from "react-reex"
import counterStore from "./counter"
const store = createStore({
modules: {
counterStore,
},
created() {
console.log("created global")
},
before(data) {
console.log("before global", data)
},
handler(state) {
console.log("handler global", state)
},
})
export const { useReexState, useReexGetter, useReexModule, useReexAction } = store
export default store
c. Create a component
In /components/MyComponent.tsx
import React from "react"
import store, { useReexState } from "../store"
const Counter = () => {
const count = useReexState("counter/count")
return (
<button
onClick={() => store.dispatch("counter/increment")}
>
{count}
</button>
)
}
License
MIT
