Managing store using hook
Now with the help of hook and advance concept of react we can manage the store of our application.
To manage the store first we can add a file and we will define a custom hook that will act same as the action and reducer work behind the scene of redux.
export const useStore = (shouldUpdate=true) => {
const setState = useState(mainState)[1];
const dispatch = (actionIdentifier, payload) => {
const newState = actions[actionIdentifier](mainState, payload);
mainState = { …mainState, …newState };
for (const listener of eventListeners) {
listener(mainState);
}
};
useEffect(() => {
if(shouldUpdate){
eventListeners.push(setState);
}
return () => {
if(shouldUpdate){
eventListeners = eventListeners.filter(li => li !== setState);
}
};
}, [setState,shouldUpdate]);
return [mainState, dispatch];
};
export const initStore = (userActions, initialState) => {
if (initialState) {
mainState = { …mainState, …initialState };
}
actions = { …actions, …userActions };
};
In above code we have defined mainState,action that we can update from our component.We can pass shouldUpdate as false from our component which is using React.memo to prevent the extra render of page for each item.
Wrapping up
We can manage the store without redux by using hook.For more detail how we can call the above configured store hook refer to the link I shared below: