don't take it too seriously; a simple builtin global state management in react
npm install reacters --save
create provider
import { createProvider } from 'reacters'
import { Dispatchers } from 'reacters/lib/typings'
type State = {
count: number
}
type Reducers = {
increment: (
state: State,
dispatcher: Dispatchers<State, Reducers>,
payload: { count: number },
) => State
}
export const model = createProvider<State, Reducers>({
name: 'reactx',
state: {
count: 1,
},
reducers: {
increment(state, dispatcher, payload) {
return { ...state, count: state.count + payload.count }
},
},
})
use in component
import React from 'react'
import { model } from '../models/reacters'
export const Counter = () => {
const { state, dispatch } = model.useState(state => state)
return (
<div>
{state.count}
<a onClick={() => dispatch.increment({ count: 1 })}>增加</a>
</div>
)
}
see more details in example