Introduction

This is our take on a react store, tiny & easy to use. We have been using this in production for since 2020, mostly on React/Preact, SEO driven websites where performance is key.

Advantages

• Small bundle size ~0.5K zipped
• Performance - re-rendered only on required state changes
• Familiar api: similar to React-Redux, Zustand, Easy Peasy ...
• Granular module exports adding functionality: React >> React Redux >> React Redux Connect
• Extensible; if you need additional methods, just add to the store instance
• Separation of state & actions / reducers ... not combined into one object; simple to reset/reload state
• UseStore; selector instance is not recreated on each render. If your selector maintains state, use the rebind argument to force a new instance.

Installing

$ npm i @raiz/react-simple-store
#or
$ yarn add @raiz/react-simple-store

Create a store(s)

Each store is created with the createStore function. We have extended this function with 2 Redux varients: createStoreRedux & createStoreReduxConnect; these add methos to mimic depatch & connect apis. For all modern projects we recommend just using createStore.

Basic store

// Basic store, with no argumentsimport{createStore}from'@raiz/react-simple-store'exportconstcounterStore=createStore();

Basic store with initial state & actions

// Basic storeimport{createStore}from'@raiz/react-simple-store'conststate={count: 0,};constactions=(set,get)=>{return{increase: ()=>set({count: ++get().count}),decrease: ()=>set({count: --get().count}),};};exportconstcounterStore=createStore({actions, state});

Add additional methods

// Basic storeimport{createStore}from'@raiz/react-simple-store'import{shallowEqual}from'@raiz/react-simple-store/utils'conststate={count: 0,};constactions=(set,get)=>{return{increase: ()=>set({count: ++get().count}),decrease: ()=>set({count: --get().count}),};};exportconstcounterStore=createStore({actions, state});// add a hook method with shallowEqual fncounterStore.useStoreShallow=selector=>counterStore.useStore(selector,shallowEqual)

Export your store

We recommend creating a store in its own file & exporting. You can export the stores methods, or the store object. We prefer exporting the store object, this makes it clear & consistent when multiple stores may be consumed in the same file.

// export store methods// The downside is we must name all the custom actions & most likely will have to alias exportconst{ useStore, getState, setState, destroy, subscribe}=createStore({actions, state});// export the store instance; clear & consistentexportconstcounterStore=createStore({actions, state});

Using your store(s)

// Basic hook usageimport{counterStore}from'./counterstore'constComponent=(props)=>{constcount=counterStore.useStore((s)=>s.count);return(<div><divdata-testid="count">{count}</div><buttontype="button"onClick={counterStore.increase}>+</button></div>);};