Yet another React state container like Redux, but based on React Hooks API.
Note: This is using the new React Hooks API Proposal
You'll need to install
react,react-dom, etc at^16.7.0-alpha.0
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.
Prepare the state and reducer:
// 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 }
}
}Using Rehux:
import { createRehux } from 'rehux'
// 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