Notice that it seems like you "mutate" the data you change. You treat it as if it was a mutation in your code, but thanks to the power of immer, a new state object is created.
StoreProvider should wrap the app in the top level, so the store data will be available throughout the whole app.
props:
store - pass a store holding the app state. the store should be created using the createStore function supplied be hooxigene.
viewer - hooxigene uses react-state-trace library, which is a great devtool that let's you view your app state as it changes and break it to pieces. viewer is a boolean flag. when explicitly set to true, it shows the viewer at the top right of the app. Press shift + s to show or hide the devtool when you use it.
Consuming the store & dispatching actions - getState & getDispatch
getState exposes your app state. Make sure to call it inside a component or a function, because the nature of hooks in react require it.
You pass the name you gave the reducer-like object. In our example it could be dashboard, user or base.
If you have nested properties you do not have to destructure the object, you can simply separate the path using commas .. For example you can do any of the following four and it is the same:
When you use getState without a reducer-like object name, you get the whole state object.
getDispatch exposes your app dispatcher / actions. As with getState, make sure to call it inside a component or a function.
- You pass the name you gave the reducer-like object. In our example it could be dashboard, user or base.:
You pass the name you gave the reducer-like object. In our example it could be dashboard, user or base.
You can access a specific reducer-like object dispatcher directly. For example you can do any of the following four and it is the same:
const dispatch = getDispatch('dashboard');
const dispatch = getDispatch().dashboard;
When you want to dispatch an action to change the state you call dispatch('SET_TEXT_EDITOR_MODE', { mode: 'edit' }).
First argument is the type of the action which you defined as a key on handlers in your reducer-like object.
Second argument is the payload which is passed to the handler itself as the second parameter: handlers: { SET_TEXT_EDITOR_MODE: (state, { mode }) => state.mode = mode, }.
About
:thought_balloon: An unfancy straight forward state manager for react hooks applications