Repository files navigation

Ridiculously simple state stores with performant retrieval anywherein your React tree using the wonderful concept of React hooks!

• ~7KB minified and gzipped! (excluding Immer and React)
• Built with Typescript, providing a great dev experience if you're using it too
• Usesimmer for state updates - easily and safely mutate your state directly!
• NEW -Create async actions and use React hooks or<Suspense/> to have complete control over their UI states!

Originally inspired by the now seemingly abandoned library -bey. Although substantiallydifferent now- with Server-side rendering and Async Actions built in! Bey was in turn inspired byreact-copy-write.

Try out a quick example:

• Installation
• Quick example
• Quick example - Server rendering
• Async Actions
  • Creation
  • Usage
  • Async action hooks

This is taken directly fromthe documentation site, to give you a quick overview of Pullstate here on github. Be sure to check out the site to learn more.

To start off, installpullstate.

yarn add pullstate

Define the firststate store, by passing an initial state tonew Store():

import{Store}from"pullstate";exportconstUIStore=newStore({isDarkMode:true,});

Then, in React, we can start using the state of that store using a simple hookuseState():

import*asReactfrom"react";import{UIStore}from"./UIStore";exportconstApp=()=>{constisDarkMode=UIStore.useState(s=>s.isDarkMode);return(<divstyle={{background:isDarkMode ?"black" :"white",color:isDarkMode ?"white" :"black",}}><h1>Hello Pullstate</h1></div>);};

The argument touseState() over here (s => s.isDarkMode), is a selection function that ensures we select only the state that we actually need for this component. This is a big performance booster, as we only listen for changes (and if changed, re-render the component) on the exact returned values - in this case, simply the value ofisDarkMode.

Great, so we are able to pull our state fromUIStore into our App. Now lets add some basic interaction with a<button>:

return(<divstyle={{background:isDarkMode ?"black" :"white",color:isDarkMode ?"white" :"black",}}><h1>Hello Pullstate</h1><buttononClick={()=>UIStore.update(s=>{s.isDarkMode=!isDarkMode;})}>        Toggle Dark Mode</button></div>);

Notice how we callupdate() onUIStore, inside which we directly mutate the store's state. This is all thanks to the power ofimmer, which you can check outhere.

Another pattern, which helps to illustrate this further, would be to actually define the action of toggling dark mode to a function on its own:

functiontoggleMode(s){s.isDarkMode=!s.isDarkMode;}// ...in our <button> code<buttononClick={()=>UIStore.update(toggleMode)}>Toggle Dark Mode</button>

Basically, to update our app's state all we need to do is create a function (inline arrow function or regular) which takes the current store's state and mutates it to whatever we'd like the next state to be.

Something interesting to notice at this point is that we are just importingUIStore directly and runningupdate() on it:

import{UIStore}from"./UIStore";// ...in our <button> code<buttononClick={()=>UIStore.update(toggleMode)}>Toggle Dark Mode</button>

And our components are being updated accordingly. We have freed our app's state from the confines of the component! This is one of the main advantages of Pullstate - allowing us to separate our state concerns from being locked in at the component level and manage things easily at a more global level from which our components listen and react (through ouruseStoreState() hooks).