Rollout Application Level State Quickly with useDataStore

What is useDataStore?

useDataStore is a mini-library I created that just just abstracts away a lot of the boilerplace is using Context and useReducer to create Redux like App wide state.

How do you Install

Install in your react project using npm

npm install usedatastore

Creating your DataStore Components and usedataStore hook.

The Library provides you with one function, createDataStore. This function takes two arguments. The initial state and the reducer function. The function does a few things for us.

If you are not familiar with a reducer function, it takes the state and an action which can be anything. The return value of the function becomes the new state

• Creates the context
• Creates a component that wraps its children in the context provider
• Creates state and a dispatch function using useReducer which is then passed to the provider in it’s value prop
• returns an array with the component (DataStore) and a hook to extract content(useDataStore)

Best practice is to house the initialState, the reducer and invoke createDataStore in a file called ds.js in your /src folder. Here is an example…

import {createDataStore} from "usedatastore"
console.log(createDataStore);

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case "add":
      return { ...state, count: state.count + action.payload };
      break;
    case "sub":
      return { ...state, count: state.count - action.payload };
      break;
    default:
      return state;
      break;
  }
};

export const [DataStore, useDataStore] = createDataStore(initialState, reducer);

Adding the Provider Component

In your App.js you can do something like this…

import React from "react";
import {DataStore} from "./DS"
import {Other} from "./Other"

export const App = (props) => {
  return <DataStore><Other/></DataStore>;
};

Using the state and dispatch function

Now you can just import the useDataStore hook into any component and be able to quickly update or use the application DataStore!

import React from "react";
import { useDataStore } from "./DS";

export const Other = (props) => {
  const { dataStore, dispatch } = useDataStore();

  return (
    <>
      <h1>{dataStore.count}</h1>
      <button onClick={() => dispatch({ type: "add", payload: 1 })}>Add</button>
      <button onClick={() => dispatch({ type: "sub", payload: 1 })}>
        Subtract
      </button>
    </>
  );
};

NOTE: In the example above I’m using the pattern often used in redux which is the following.

• The action argument passed to dispatch/reducer is an object with a type and payload property
• The type property is a string passed into a switch to determine what update should be made to state
• The payload is extra details needed for the action to complete

The point of this pattern is to move a lot of your core application login into the reducer function and make your components less verbose and logic easier to find. Downside… less encapsulation making components less reusable between applications.