makeStore react hook(without immerjs 😂) #react #hook #hooks #store #React.createContext #useContext #useContext

makeStore.js

function makeStore({ actions }) {
  // Make a context for the store
  const context = React.createContext();

  // Make a provider that takes an initialValue
  const Provider = ({ initialValue = {}, children }) => {
    // Make a new state instance
    const [state, setState] = useState(initialValue);

    // Bind the actions with the old state and args
    const boundActions = {}
    Object.keys(actions).forEach(key => {
      boundActions[key] = (...args) => 
        setState(old => actions\[key\](old, ...args))
    })

    // Memoize the context value to update when the state does
    const contextValue = useMemo(() => [state, boundActions], [state]);

    // Provide the store to children
    return <context.Provider value={contextValue}>{children}</context.Provider>;
  };

  // A hook to help us consume the store
  const useStore = () => useContext(context);

  return [Provider, useStore];
}