reshow-flux-base
v1.1.8
Published
Simplify state management with no dependencies, yet powerful.
Downloads
2,017
Maintainers
Readme
createReducer
Similar with react useReducer, but let you use anywhere.
- GIT
- https://github.com/react-atomic/reshow/tree/main/packages/reshow-flux-base
- NPM
- https://www.npmjs.com/package/reshow-flux-base
Usage
Accepts a reducer function of type (state, action) => newState
.
Returns a new store with a dispatch method.
import { createReducer } from "reshow-flux-base";
/**
* reducer -> (state, action) => newState
*/
const [store, dispatch] = createReducer(reducer, initial[Arg | Function]);
Store
methods.
| Methods | Explain | | -------------- | ---------------------------------------------------------------- | | getState | Return current state. | | addListener | You could register any callback function such as react useState. | | removeListener | Remove register callback, such as unmount a component. |
Full App Example
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
throw new Error();
}
}
const [store, dispatch] = createReducer(reducer, initialState);
function Counter() {
const [state, setState] = useState(() => store.getState());
useEffect(() => {
store.addListener(setState);
return () => {
store.removeListener(setState);
};
}, []);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
</>
);
}
Codesandbox
https://codesandbox.io/s/reshow-flux-base-34umk