Yet another React state container like Redux, but based on React Hooks API.
npm i rehux --save
Here is just an example for showing how Rehux looks like. If your application is as simple as this, you might not need state management tool. Local state or local useReducer
is fine.
import { createRehux } from 'rehux'
// Global state
const initialState = {
count: 0
}
// Actions
enum Actions {
INCR, DECR, RESET
}
// Reducer
const reducer = (state, action) => {
switch (action.type) {
case Actions.INCR:
return { count: count + 1 }
case Actions.DECR:
return { count: count - 1 }
case Actions.RESET:
return { count: 0 }
}
}
// Create Rehux
const { Provider, useRehux } = createRehux(initialState, reducer)
// A component for displaying `count`
function Display () {
const { state } = useRehux()
return (
<div>{state.count}</div>
)
}
// A component for mutating `count`
function Toolbar () {
const { dispatch } = useRehux()
return (
<div>
<button onClick={_ => dispatch({ type: Actions.INCR })}>Incr</button>
<button onClick={_ => dispatch({ type: Actions.RESET })}>Reset</button>
<button onClick={_ => dispatch({ type: Actions.DECR })}>Decr</button>
</div>
)
}
// Wrapped components by Provider
function App() {
return (
<Provider>
<Display />
<Toolbar />
</Provider>
)
}
render(<App />, document.body)
A context provider component which should be put on top of all your components
A React hook return the state and the dispatch method.
MIT License