precise-react-store v1.0.1

precise-react-store

Introduction

With precise-react-store you can easily make multiple stores.

Behind scenes, precise-react-store uses two React.context one for dispatch and, the other for accessing the store. This idea is promoted by Kent C Dodds and Tanner Linsley

This package is put together to help me from copy paste the module from one project to another. If you are a copy & paste kind, you can get the source file in the package dist file!!

All you need is a React.useReducer and initialState to be supplied to the default export makeStore and it will return a Provider, a dispatch, and a store

import makeStore from "precise-react-store";

const initialStore = { count: 0 };
const countReducer = (state, action) => {
  switch (action.type) {
    case "add": {
      return {
        ...state,
        count: state.count + action.payload
      };
    }
    case "minus": {
      return {
        ...state,
        count: state.count - action.payload
      };
    }
    case "reset": {
      return initialStore;
    }
    default: {
      throw new Error(`Unhandled action type: ${action.type}`);
    }
  }
};
const [CountProvider, countDispatch, countStore] = makeStore(
  countReducer,
  initialStore
);

export { CountProvider, countDispatch, countStore };

Code example

codesandbox