README
Rehux
Yet another React state container like Redux, but based on React Hooks API.
Install
npm i rehux --save
Usage
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)
APIs
createRehux(initialState, reducer): { Provider, useRehux }
Provider
A context provider component which should be put on top of all your components
useRehux(): { state, dispatch }
A React hook return the state and the dispatch method.
License
MIT License