DEV Community: Yezy Ilomo

You’re One Import Away From Managing Global State In React

Yezy Ilomo — Tue, 08 Mar 2022 13:22:53 +0000

Intro

When it comes to using third party libraries in my projects, I’m a big fan of libraries which provides simple and intuitive API, the ones that just makes sense at first glance.

There’re many libraries for managing global state in ReactJS, so when it comes to choosing one, as said earlier I look for simplicity and intuitive API.

That being said I would like to present to you a simple example, in this example we’re going to use a state management library called state-pool for managing our global states.

Assuming you have a basic knowledge of ReactJS and hooks, try to take a little bit of your time to understand the code below for managing global state in a component

import React from 'react';
import { createStore } from 'state-pool';


const store = createStore();  // Create a store for storing our global state
store.setState("count", 0);  // Create and initialize "count" global state

function Counter(props){
    // Use "count" global state
    const [count, setCount] = store.useState("count");

    // Other stuff 
}

Questions

How easy was it for you to understand this example?
How familiar was it, assuming you have a basic knowledge of ReactJS and hooks?

You can leave your answers to these questions to the comments section below.

Now let’s go!…

State pool is a state management library based on global variables and react hooks, it comes with a very simple and intuitive API which follows built in state management patterns in React(Hooks).

With these patterns you’re likely to be familiar with state pool without even learning it, like in a previous example above most people with a basic knowledge of ReactJS and hooks could understand how it works.

Managing global state with state-pool is very simple, all you need to do is

Create a store(which is basically a container for your global state) by using createStore
Create and initialize a global state by using store.setState
Use your global state in your component through store.useState hook

These three steps summarises pretty much everything you need to use state-pool.

Below is an example showing how to use state-pool to manage global state

import React from 'react';
import { createStore } from 'state-pool';


const store = createStore();  // Create store for storing our global state
store.setState("count", 0);  // Create and initialize a global state

function ClicksCounter(props){
    // Use "count" global state
    const [count, setCount] = store.useState("count");

    const incrementCount = (e) => {
        setCount(count + 1)
    }

    return (
        <div>
            Count: {count} <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

At this point you might have noticed that all you need to import from state-pool to be able to manage your global state is createStore, this is because store implements and encapsulates everything you need to manage your global state, this makes sense because a store is a container for your global states, so it should be able to manage everything in it, you just need to create one and use it.

It’s easy to understand that store.setState is used to set state in a store

Also if you’re already familiar with the built in useState hook it’s easy to understand that store.useState works the same way but it’s using the state from a store.

store.useReducer

At this point you might have guessed there’s probably something like store.useReducer that works like built in useReducer, well you’re right!…

Below is a simple example showing how to use store.useReducer hook

store.setState("user", {
    name: "Yezy",
    age: 25,
    email: "yezy@me.com"
});

function myReducer(state, action){
    // This could be any reducer
    // Do whatever you want to do here
    return newState
}

function Component(props){
    const [name, dispatch] = store.useReducer(myReducer, "user");

    // Other stuff ...
}

Selector & Patcher

With state pool you can subscribe to deeply nested global state or a derived state, here is an example

store.setState("user", {
    name: "Yezy",
    age: 25,
    email: "yezy@me.com"
});


function UserName(props){
    const selector = (user) => user.name;  // Subscribe to user.name only
    const patcher = (user, name) => {user.name = name};  // Update user.name

    const [name, setName] = store.useState("user", {selector: selector, patcher: patcher});

    const handleNameChange = (e) => {
        setName(e.target.value);
    }

    return (
        <div>
            Name: {name} <br/>
            <input type="text" value={name} onChange={handleNameChange}/>
        </div>
    );
}

Here selector & patcher are used for specifying a way to select deeply nested state and update it.

selector should be a function which takes one parameter which is the global state and returns a selected value. The purpose of this is to subscribe to a deeply nested state.
patcher should be a function which takes two parameters, the first is the global state and the second is the selected value. The purpose of this is to merge back the selected value to the global state once it's updated.

State persistence

State pool has a built in support for state persistence, it makes saving your global states in your preferred permanent storage very easy, all you need to do is tell state pool how to save, load, clear and remove your global state from your preferred storage by using store.persist

The way to implement these is by calling store.persist and pass them as shown below

store.persist({
    saveState: function(key, value, isInitialSet){/*your code to save state */},
    loadState: function(key){/*your code to load state */},
    removeState: function(key){/*your code to remove state */},
    clear: function(){/*your code to clear storage */}
})

After implementing these four functions you're good to go, you won’t need to worry about calling them, state-pool will be doing that for you automatically so that you can focus on using your states.

Both store.setState, store.useState and store.useReducer accepts an optional configuration parameter, persist, this is the one which is used to tell state-pool whether to save your global state to a permanent storage or not. i.e

store.setState(
    key: String,
    initialState: Any,
    config?: {persist: Boolean}
)

store.useState(
    key: String,
    config?: {default: Any, persist: Boolean, ...otherConfigs}
)

store.useReducer(
    reducer: Function,
    key: String,
    config?: {default: Any, persist: Boolean, ...otherConfigs}
)

By default the value of persist in all cases is false(which means it doesn't save global states to a permanent storage), so if you want to activate it, you have to set it to be true.

What's even better about state-pool is that you get the freedom to choose what to save in your permanent storage, so you don't need to save the whole store in your permanent storage, but if you want to save the whole store you can use PERSIST_ENTIRE_STORE configuration.

Below is an example showing how you could implement state persistance in local storage.

import { createStore } from 'state-pool';

const store = createStore();

let timerId: any = null
const DEBOUNCE_TIME = 1000  // In milliseconds

store.persist({
    PERSIST_ENTIRE_STORE: true,  // Use this only if you want to persist the entire store
    saveState: function(key, value, isInitialSet){
        const doStateSaving = () => {
            try {
                const serializedState = JSON.stringify(value);
                window.localStorage.setItem(key, serializedState);
            } catch {
                // Ignore write errors
            }
        }

        if(isInitialSet){
            // We don't debounce saving state since it's the initial set
            // so it's called only once and we need our storage to be updated
            // right away
            doStateSaving();
        }
        else {
            // Here we debounce saving state because it's the update and this function
            // is called every time the store state changes. However, it should not
            // be called too often because it triggers the expensive `JSON.stringify` operation.
            clearTimeout(timerId);
            timerId = setTimeout(doStateSaving, DEBOUNCE_TIME);
        }
    },
    loadState: function(key){
        try {
            const serializedState = window.localStorage.getItem(key);
            if (serializedState === null) {
                // No state saved
                return undefined
            }
            return JSON.parse(serializedState);
        } catch (err) {
            // Failed to load state
            return undefined
        }
    },
    removeState: function(key){
        window.localStorage.removeItem(key);
    },
    clear: function(){
        window.localStorage.clear();
    }
})

Note: When you set PERSIST_ENTIRE_STORE = true, state-pool will be persisting all your global states to the permanent storage by default unless you explicitly specify persist = false when initializing your global state.

You can do a lot with state pool apart from few mentioned, all at the cost of importing only one thing createStore.

All you need is createStore the rest can be handled by a store itself.

Feature & Advantages

Here are some of the features and advantages of using state pool

Simple, familiar, flexible and very minimal core API but powerful
Built-in support for state persistence
Very easy to learn because its API is very similar to react state hook's API
Support selecting deeply nested state
Support creating global state dynamically
Can be used outside react components
Support both key based and non-key based global state
States are stored as global variables(Can be used anywhere)
Doesn't wrap your app in context providers
Very organized API, You can do almost everything with a single import

Installing state pol

You can install state pool with
yarn add state-pool
Or
npm install state-pool

Conclusion

Congratulations for making to this point 🎉🎉,
if you want to learn more about this state management library you can check its full documentation HERE.

Live examples HERE.

Giving it a star on GitHub will be appreciated.

Lastly I would like to hear your opinions, what do you think of this library?.

Server Side Rendering(SSR) With "State Pool" React State Manager

Yezy Ilomo — Sat, 14 Aug 2021 13:28:03 +0000

Introduction

Since I wrote the blog "You Can Definitely Use Global Variables To Manage Global State In React", I've been getting a lot of questions asking whether it's possible to use State Pool if you are using server side rendering(SSR) approach.

The answer to this question is YES, YOU CAN, it's actually very easy to do SSR with State Pool.

Server rendering

The most common use case for server-side rendering is to handle the initial render when a user (or search engine crawler) first requests our app. When the server receives the request, it renders the required component(s) into HTML string, and then sends it as a response to the client. From that point on, the client takes over rendering duties.

When using State pool with server side rendering, we must also send the state of our app along in our response, so the client can use it as the initial state. This is important because, if we preload any data before generating the HTML, we want the client to also have access to this data. Otherwise, the markup generated on the client won't match the server markup, and the client would have to load the data again.

To send the data down to the client, we need to:

Create a fresh, new state pool store instance on every request
Pull the state out of store
And then pass the state along to the client.

On the client side, a new store will be created and initialized with the state provided from the server.

State pool's only job on the server side is to provide the initial state for our app.

Implementation

Now let's write code, we're going to create a file and name it ssr.js, that's where we are going to put all the code which will help us achieve server side rendering.


// ssr.js

import React from 'react';
import { store } from 'state-pool';


const PRELOADED_STATE = '__PRELOADED_STATE__';

function initializeClientStoreByUsingServerState(serverState) {
    for (let key in serverState) {
        store.setState(key, serverState[key]);
    }
}


function initializeStore(initializeStoreNormally) {
    if (typeof window !== 'undefined' && window[PRELOADED_STATE]) {
        // We're on client side and there're states which have been sent from a server
        // So we initialize our store by using server states
        let states = JSON.parse(window[PRELOADED_STATE]);
        initializeClientStoreByUsingServerState(states);
    }
    else {
        // We're on server side or on client side without server state
        // so we initialize the store normally
        initializeStoreNormally(store);
    }
}


function getServerStatesToSendToClient() {
    let states = {}
    for (let key in store.value) {
        states[key] = store.value[key].getValue();
    }
    return JSON.stringify(states);
}


function Provider({ children }) {
    const script = {
        __html: `window.${PRELOADED_STATE} = '${getServerStatesToSendToClient()}';`
    }

    return (
        <>
            <script dangerouslySetInnerHTML={script} />
            {children}
        </>
    );
}


const SSR = {
    Provider: Provider,
    initializeStore: initializeStore
};

export default SSR;

Believe it or not, that's all we need to use State Pool in SSR. Now let's use the code we have written above to write SSR app. We are going to use NextJS for server side rendering.

import { useGlobalState } from 'state-pool'
import SSR from '../ssr';  // From the file we wrote before


function lastUpdateLocation() {
    if (typeof window !== 'undefined') {
        return "client side";
    }
    return "server side"
}

SSR.initializeStore((store) => {
    store.setState("state", {
        "count": 0,
        "lastUpdateLocation": lastUpdateLocation()
    });
});


function Counter() {
    const [state, setState] = useGlobalState("state");

    const setCount = (count) => {
        setState({
            "count": count,
            "lastUpdateLocation": lastUpdateLocation()
        })
    }

    return (
        <center>
            <br /><br />
            <br /><br />
            {state.count}
            <br /><br />
            <button onClick={() => setCount(state.count - 1)}>Decrement</button>
            &#160;--&#160;
            <button onClick={() => setCount(state.count + 1)}>Increment</button>
            <br /><br />
            Last updated on {state.lastUpdateLocation}
        </center>
    )
}

export default function Home() {
    return (
        <SSR.Provider >
            <Counter />
        </SSR.Provider>
    )
}

So what happens here is that we have a global state and we are tracking where it was last updated(Whether on server side or client side)

Below is the result of our app

You can see from our app that when it starts it shows the global state was last updated on server, that's because with SSR, states are initialized on server side.

After incrementing or decrementing, it says the global state was last updated on client side, which makes sense because immediate after receiving a response from a server the client took over rendering duties which means any update done from that point would be client's doing.

Security Considerations

Because we have introduced more code that relies on user generated content and input, we have increased our attack surface area for our application. It is important for any application that you ensure your input is properly sanitized to prevent things like cross-site scripting (XSS) attacks or code injections.

For our simplistic example, coercing our input into a number is sufficiently secure. If you're handling more complex input, such as freeform text, then you should run that input through an appropriate sanitization function.

Here is the repository for the demo app if you want to play with it.

Congratulation for making to this point, I would like to hear from you, what's your opinion on this?.

You Can Definitely Use Global Variables To Manage Global State In React

Yezy Ilomo — Wed, 07 Jul 2021 20:00:47 +0000

Introduction

React provides a very good and simple way to manage local states through state hooks but when it comes to global states the options available are overwhelming.

React itself provides the context API which many third party libraries for managing global state are built on top of it, but still the APIs built are not as simple and intuitive as state hooks, let alone the cons of using the context API to manage global state which we won't be discussing in this post, but there are plenty of articles talking about it.

So managing global states in react is still a problem with no clear solution yet.

But what if I tell you there might be a solution which is based on global variables?

Yes the global variables that you use every day in your code.

How is it possible?

The concept of managing states is very similar to the concept of variables which is very basic in almost all programming languages.

In state management we have local and global states which corresponds to local and global variables in a concept of variables.

In both concepts the purpose of global(state & variable) is to allow sharing of a value among entities which might be functions, classes, modules, components etc, while the purpose of local(state & variable) is to restrict its usage to the scope where it has been declared which might also be a function, a class, a module, a component etc.

So these two concepts have a lot in common, this made me ask myself a question

"What if we use global variables to store global states in react?".

Answers

As of now we can use a normal global variable to store a global state but the problem comes when we want to update it.

If we use regular global variable to store react global state we won't be able to get the latest value of our state right away when it gets updated, because there's no way for react to know if a global variable has changed for it to re-render all components depending on such global variable in order for them to get a fresh(updated) value. Below is an example showing this problem



import React from 'react';

// use global variable to store global state
let count = 0;

function Counter(props){
    let incrementCount = (e) => {
        ++count;
        console.log(count);
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

ReactDOM.render(<Counter/>, document.querySelector("#root"));

As you might have guessed this example renders count: 0 initially but if you click to increment, the value of count rendered doesn't change, but the one printed on a console changes.

So why this happens despite the fact that we have only one count variable?.

Well this happens because when the button is clicked, the value of count increments(that's why it prints incremented value on a console) but the component Counter doesn't re-render to get the latest value of count.

So this is the only problem standing in our way to use global variables to manage global state in react.

Solution

Since global states are shared among components, the solution to our problem would be to let a global state notify all the components which depend on it that it has been updated so that all of them re-render to get a fresh value.

But for the global state to notify all components using it(subscribed to it), it must first keep track of those components.

So to simplify, the process will be as follows

Create a global state(which is technically a global variable)
Subscribe a component(s) to a created global state(this lets the global state keep track of all components subscribed to it)
If a component wants to update a global state, it sends update request
When a global state receives update request, it performs the update and notify all components subscribed to it for them to update themselves(re-render) to get a fresh value

Here is the architectural diagram for visual clarification

With this and a little help from hooks, we'll be able to manage global state completely with global variables.

Luckily we won't need to implement this on ourselves because State Pool got our back.

Introducing State Pool✨🎉.

State Pool is a react state management library based on global variables and react hooks. Its API is as simple and intuitive as react state hooks, so if you have ever used react state hooks(useState or useReducer) you will feel so familiar using state-pool. You could say state-pool is a global version of react state hooks.

Features and advantages of using State Pool

Simple, familiar and very minimal core API but powerful
Built-in state persistence
Very easy to learn because its API is very similar to react state hook's API
Support selecting deeply nested state
Support creating global state dynamically
Support both key based and non-key based global state
States are stored as global variables(Can be used anywhere)

Installing

yarn add state-pool

npm install state-pool

Getting Started

Now let's see a simple example of how to use state-pool to manage global state



import React from 'react';
import {store, useGlobalState} from 'state-pool';


store.setState("count", 0);

function ClicksCounter(props){
    const [count, setCount] = useGlobalState("count");

    let incrementCount = (e) => {
        setCount(count+1)
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

ReactDOM.render(ClicksCounter, document.querySelector("#root"));

If you've ever used useState react hook the above example should be very familiar,

Let's break it down

On a 2nd line we're importing store and useGlobalState from state-pool.
We are going to use store to keep our global states, so store is simply a container for global states.
We are also going to use useGlobalState to hook in global states into our components.
On a 3rd line store.setState("count", 0) is used to create a global state named "count" and assign 0 as its initial value.
On 5th line const [count, setCount] = useGlobalState("count") is used to hook in the global state named "count"(The one we've created on 3rd line) into ClicksCounter component.

As you can see useGlobalState is very similar to useState in so many ways.

Updating Nested Global State

State Pool is shipped with a very good way to handle global state update in addition to setState especially when you are dealing with nested global states.

Let's see an example with nested global state



import React from 'react';
import {store, useGlobalState} from 'state-pool';


store.setState("user", {name: "Yezy", age: 25});

function UserInfo(props){
    const [user, setUser, updateUser] = useGlobalState("user");

    let updateName = (e) => {
        updateUser(function(user){
            user.name = e.target.value;
        });
    }

    return (
        <div>
            Name: {user.name}
            <br/>
            <input type="text" value={user.name} onChange={updateName}/>
        </div>
    );
}

ReactDOM.render(UserInfo, document.querySelector("#root"));

In this example everything is the same as in the previous example

On a 3rd line we're creating a global state named "user" and set {name: "Yezy", age: 25} as its initial value.

On 5th line we're using useGlobalState to hook in the global state named "user"(The one we've created on a 3rd line) into UserInfo component.

However here we have one more function returned in addition to setUser which is updateUser, This function is used for updating user object rather than setting it, though you can use it to set user object too.

So here updateUser is used to update user object, it's a higher order function which accepts another function for updating user as an argument(this another functions takes user(old state) as the argument).

So to update any nested value on user you can simply do



updateUser(function(user){
    user.name = "Yezy Ilomo";
    user.age = 26;
})

You can also return new state instead of changing it i.e



updateUser(function(user){
    return {
        name: "Yezy Ilomo",
        age: 26
    }
})

So the array returned by useGlobalState is in this form [state, setState, updateState]

state hold the value for a global state
setState is used for setting global state
updateState is used for updating global state

Selecting Nested State

Sometimes you might have a nested global state but some components need to use part of it(nested or derived value and not the whole global state).

For example in the previous example we had a global state named "user" with the value {name: "Yezy", age: 25} but in a component UserInfo we only used/needed user.name.

With the approach we've used previously the component UserInfo will be re-rendering even if user.age changes which is not good for performance.

State Pool allows us to select and subscribe to nested or derived states to avoid unnecessary re-renders of components which depends on that nested or derived part of a global state.

Below is an example showing how to select nested global state.



import React from 'react';
import {store, useGlobalState} from 'state-pool';


store.setState("user", {name: "Yezy", age: 25});

function UserInfo(props){
    const selector = (user) => user.name;  // Subscribe to user.name only
    const patcher = (user, name) => {user.name = name};  // Update user.name

    const [name, setName] = useGlobalState("user", {selector: selector, patcher: patcher});

    let handleNameChange = (e) => {
        setName(e.target.value);
    }

    return (
        <div>
            Name: {name}
            <br/>
            <input type="text" value={name} onChange={handleNameChange}/>
        </div>
    );
}

ReactDOM.render(UserInfo, document.querySelector("#root"));

By now from an example above everything should be familiar except for the part where we pass selector and patcher to useGlobalState hook.

To make it clear, useGlobalState accept a second optional argument which is the configuration object. selector and patcher are among of configurations available.

selector: should be a function which takes one parameter which is the global state and returns a selected value. The purpose of this is to subscribe to a deeply nested state.
patcher: should be a function which takes two parameters, the first one is a global state and the second one is the selected value. The purpose of this is to merge back the selected value to the global state once it's updated.

So now even if user.age changes, the component UserInfo won't re-render because it only depend on user.name

Creating Global State Dynamically

State Pool allows creating global state dynamically, this comes in handy if the name or value of a global state depend on a certain parameter within a component(it could be server data or something else).

As stated earlier useGlobalState accepts a second optional parameter which is a configuration object, default is one of available configurations.

default configuration is used to specify the default value if you want useGlobalState to create a global state if it doesn't find the one for the key specified in the first argument. For example



const [user, setUser, updateUser] = useGlobalState("user", {default: null});

This piece of code means get the global state for the key "user" if it's not available in a store, create one and assign it the value null.

This piece of code will work even if you have not created the global state named "user", it will just create one if it doesn't find it and assign it the default value null as you have specified.

useGlobalStateReducer

useGlobalStateReducer works just like useReducer hook but it accepts a reducer and a global state or key(name) for the global state. In addition to the two parameters mentioned it also accepts other optional parameter which is the configuration object, just like in useGlobalState available configurations are selector, patcher, default and persist(This will be discussed later). For example if you have a store setup like



const user = {
    name: "Yezy",
    age: 25,
    email: "yezy@me.com"
}

store.setState("user": user);

You could use useGlobalStateReducer hook to get global state in a functional component like



function myReducer(state, action){
    // This could be any reducer
    // Do whatever you want to do here
    return newState;
}

const [name, dispatch] = useGlobalStateReducer(myReducer, "user");

As you can see, everthing here works just like in useReducer hook, so if you know useReducer this should be familiar.

Below is the signature for useGlobalStateReducer



useGlobalStateReducer(reducer: Function, globalState|key: GlobalState|String, {default: Any, persist: Boolean, selector: Function, patcher: Function})

State Persistance

Sometimes you might want to save your global states in local storage probably because you might not want to lose them when the application is closed(i.e you want to retain them when the application starts).

State Pool makes it very easy to save your global states in local storage, all you need to do is use persist configuration to tell state-pool to save your global state in local storage when creating your global state.

No need to worry about updating or loading your global states, state-pool has already handled that for you so that you can focus on using your states.

store.setState accept a third optional parameter which is the configuration object, persist is a configuration which is used to tell state-pool whether to save your state in local storage or not. i.e



store.setState(key: String, initialState: Any, {persist: Boolean})

Since state-pool allows you to create global state dynamically, it also allows you to save those newly created states in local storage if you want, that's why both useGlobalState and useGlobalStateReducer accepts persist configuration too which just like in store.setState it's used to tell state-pool whether to save your newly created state in local storage or not. i.e



useGlobalState(key: String, {defaultValue: Any, persist: Boolean})



useGlobalStateReducer(reducer: Function, key: String, {defaultValue: Any, persist: Boolean})

By default the value of persist in all cases is false(which means it doesn't save global states to the local storage), so if you want to activate it, set it to be true. What's even better about state-pool is that you get the freedom to choose what to save in local storage and what's not to, so you don't need to save the whole store in local storage.

When storing state to local storage, localStorage.setItem should not be called too often because it triggers the expensive JSON.stringify operation to serialize global state in order to save it to the local storage.

Knowing this state-pool comes with store.LOCAL_STORAGE_UPDATE_DEBOUNCE_TIME which is the variable used to set debounce time for updating state to the local storage when global state changes. The default value is 1000 ms which is equal to 1 second. You can set your values if you don't want to use the default one.

Non-Key Based Global State

State Pool doesn't force you to use key based global states, if you don't want to use store to keep your global states the choice is yours

Below are examples showing how to use non-key based global states



// Example 1.
import React from 'react';
import {createGlobalState, useGlobalState} from 'state-pool';


let count = createGlobalState(0);

function ClicksCounter(props){
    const [count, setCount, updateCount] = useGlobalState(count);

    let incrementCount = (e) => {
        setCount(count+1)
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

ReactDOM.render(ClicksCounter, document.querySelector("#root"));



// Example 2
const initialGlobalState = {
    name: "Yezy",
    age: 25,
    email: "yezy@me.com"
}

let user = createGlobalState(initialGlobalState);


function UserName(props){
    const selector = (user) => user.name;  // Subscribe to user.name only
    const patcher = (user, name) => {user.name = name};  // Update user.name

    const [name, setName, updateName] = useGlobalState(user, {selector: selector, patcher: patcher});

    let handleNameChange = (e) => {
        setName(e.target.value);
        // updateName(name => e.target.value);  You can do this if you like to use `updatName`
    }

    return (
        <div>
            Name: {name}
            <br/>
            <input type="text" value={name} onChange={handleNameChange}/>
        </div>
    );
}

Conclusion

Thank you for making to this point, I would like to hear from you, what do you think of this approach?.

If you liked the library give it a star at https://github.com/yezyilomo/state-pool.

Global state management in React with global variables and hooks. State management doesn't have to be so hard.

Yezy Ilomo — Wed, 27 May 2020 20:24:14 +0000

Introduction

First of all I'd like to talk a little bit about state management in react. State management in react can be divided into two parts

Local state management
Global state management

Local states are used when we're dealing with states which are not shared among two or more components(i.e they are used within a single component)

Global states are used when components need to share states.

React provides a very good and simple way to manage local state(React hooks) but when it comes to global state management the options available are overwhelming. React itself provides the context API which many third party libraries for managing global state are built on top of it, but still the APIs built are not as simple and intuitive as react state hooks, let alone the cons of using the context API to manage global state which we won't be discussing in this post, but there are plenty of articles talking about it, so check them out if you want to explore deeper.

So what's new?

Today I want to introduce a different approach on managing global state in react which I think it might allow us to build simple and intuitive API for managing global state just like hooks API.

The concept of managing states comes from the concept of variables which is very basic in all programming languages. In managing state we have local and global states which corresponds to local and global variables in the concept of variables. In both concepts the purpose of global(state & variable) is to allow sharing it among entities which might be functions, classes, modules, components etc, while the purpose of local(state & variable) is to restrict its usage to the scope where it has been declared which might also be a function, a class, a module, a component etc.

So these two concepts have a lot in common, this made me ask my self a question
"What if we could be able to use global variables to store global states in react?".
So I decided to experiment it.

Show me the code

I started by writing a very simple and probably a dumb example as shown below



import React from 'react';

// use global variable to store global state
let count = 0;

function Counter(props){
    let incrementCount = (e) => {
        ++count;
        console.log(count);
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

ReactDOM.render(<Counter/>, document.querySelector("#root"));

As you might have guessed this example renders count: 0 but if you click to increment, the value of count rendered doesn't change, but the one printed on a console changes. So why this happens despite the fact that we have only one count variable?.

Well this happens because when we click, the value of count increments(that's why it prints incremented value on a console) but the component Counter doesn't re-render to get the latest value of count.

So that's what we are missing to be able to use our global variable count to store a global state. Let's try to solve this by re-rendering our component when we update our global variable. Here we are going to use useState hook to force our component to re-render so that it gets a new value.



import React from 'react';

// use global variable to store global state
let count = 0;

function Counter(props){
    const [,setState] = useState();

    let incrementCount = (e) => {
        ++count;
        console.log(count);

        // Force component to re-render after incrementing `count`
        // This is hack but bare with me for now
        setState({});
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

ReactDOM.render(<Counter/>, document.querySelector("#root"));

So this works, it'll basically re-render every time you click.

I know, I know this is not a good way to update a component in react but bare with me for now. We were just trying to use global variable to store global state and it just worked so let's just cerebrate this for now.

Okay now let's continue...

What if components need to share state?

Let's first refer to the purpose of global state,

"Global states are used when components need to share states".

In our previous example we have used count global state in only one component, now what if we have a second component in which we would like to use count global state too?.

Well let's try it



import React from 'react';

// use global variable to store global state
let count = 0;

function Counter1(props){
    const [,setState] = useState();

    let incrementCount = (e) => {
        ++count;
        setState({});
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

function Counter2(props){
    const [,setState] = useState();

    let incrementCount = (e) => {
        ++count;
        setState({});
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

function Counters(props){
    return (
        <>
            <Counter1/>
            <Counter2/>
        </>
    );
}

ReactDOM.render(<Counters/>, document.querySelector("#root"));

Here we have two components Counter1 & Counter2, they are both using counter global state. But when you click the button on Counter1 it will update the value of count only on Counter1. On counter2 it will remain 0. Now when you click the button on Counter2 it updates but it jumps from zero to the last value on Counter1 plus one. If you go back to the Counter1 it does the same, jump from where it ended to the last value on Counter2 plus one.

Mmmmmmmh this is weird, what might be causing that?..

Well the reason for this is, when you click the button on Counter1 it increments the value of count but it re-renders only Counter1, since Counter1 and Counter2 doesn't share a method for re-rendering, each has its own incrementCount method which runs when the button in it is clicked.

Now when you click Counter2 the incrementCount in it runs, where it takes the value of count which is already incremented by Counter1 and increment it, then re-render, that's why the value of count jumps to the last value on Counter1 plus one. If you go back to Counter1 the same thing happen.

So the problem here is, when one component updates a global state other components sharing that global state doesn't know, the only component which knows is the one updating that global state. As a result when the global state is updated other components which share that global state won't re-render.

So how do we resolve this?....

It seems impossible at first but if you take a look carefully you will find a very simple solution.

Since the global state is shared, the solution to this would be to let the global state notify all the components(sharing it) that it has been updated so all of them need to re-render.

But for the global state to notify all components using it(subscribed to it), it must first keep track of all those components.

So to simplify the process will be as follows

Create a global state(which is technically a global variable)
Subscribe a component(s) to a created global state(this lets the global state keep track of all components subscribed to it)
If a component wants to update a global state, it sends update request
When a global state receives update request, it performs the update and notify all components subscribed to it for them to update themselves(re-render)

Here is the architectural diagram for more clarification

You are probably already familiar with this design pattern, it's quite popular, it's called Observer Design Pattern.

With this and a little help from hooks, we'll be able to manage global state completely with global variables.

Let's start by implementing our global state



function GlobalState(initialValue) {
    this.value = initialValue;  // Actual value of a global state
    this.subscribers = [];     // List of subscribers

    this.getValue = function () {
        // Get the actual value of a global state
        return this.value;
    }

    this.setValue = function (newState) {
        // This is a method for updating a global state

        if (this.getValue() === newState) {
            // No new update
            return
        }

        this.value = newState;  // Update global state value
        this.subscribers.forEach(subscriber => {
            // Notify subscribers that the global state has changed
            subscriber(this.value);
        });
    }

    this.subscribe = function (itemToSubscribe) {
        // This is a function for subscribing to a global state
        if (this.subscribers.indexOf(itemToSubscribe) > -1) {
            // Already subsribed
            return
        }
        // Subscribe a component
        this.subscribers.push(itemToSubscribe);
    }

    this.unsubscribe = function (itemToUnsubscribe) {
        // This is a function for unsubscribing from a global state
        this.subscribers = this.subscribers.filter(
            subscriber => subscriber !== itemToUnsubscribe
        );
    }
}

From the implementation above, creating global state from now on will be as shown below



const count = new GlobalState(0);
// Where 0 is the initial value

So we're done with global state implementation, to recap what we've done in GlobalState

We have created a mechanism to subscribe & unsubscribe from a global state through subscribe & unsubscribe methods.
We have created a mechanism to notify subscribers through setValue method when a global state is updated
We have created a mechanism to obtain global state value through getValue method

Now we need to implement a mechanism to allow our components to subscribe, unsubscribe, and get the current value from GlobalState.

As stated earlier, we want our API to be simple to use and intuitive just like hooks API. So we are going to make a useState like hook but for global state.

We are going to call it useGlobalState.

Its usage will be like



const [state, setState] = useGlobalState(globalState);

Now let's write it..



import { useState, useEffect } from 'react';


function useGlobalState(globalState) {
    const [, setState] = useState();
    const state = globalState.getValue();

    function reRender(newState) {
        // This will be called when the global state changes
        setState({});
    }

    useEffect(() => {
        // Subscribe to a global state when a component mounts
        globalState.subscribe(reRender);

        return () => {
            // Unsubscribe from a global state when a component unmounts
            globalState.unsubscribe(reRender);
        }
    })

    function setState(newState) {
        // Send update request to the global state and let it 
        // update itself
        globalState.setValue(newState);
    }

    return [State, setState];
}

That's all we need for our hook to work. The very important part of useGlobalState hook is subscribing and unsubscribing from a global state. Note how useEffect hook is used to make sure that we clean up by unsubscribing from a global state to prevent a global state from keeping track of unmounted components.

Now let's use our hook to rewrite our example of two counters.



import React from 'react';

// using our `GlobalState`
let globalCount = new GlobalState(0);

function Counter1(props){
    // using our `useGlobalState` hook
    const [count, setCount] = useGlobalState(globalCount);

    let incrementCount = (e) => {
        setCount(count + 1)
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

function Counter2(props){
    // using our `useGlobalState` hook
    const [count, setCount] = useGlobalState(globalCount);

    let incrementCount = (e) => {
        setCount(count + 1)
    }

    return (
        <div>
            Count: {count}
            <br/>
            <button onClick={incrementCount}>Click</button>
        </div>
    );
}

function Counters(props){
    return (
        <>
            <Counter1/>
            <Counter2/>
        </>
    );
}

ReactDOM.render(<Counters/>, document.querySelector("#root"));

You will notice that this example works perfectly fine. When Counter1 updates Counter2 get updates too and vice versa.

This means it's possible to use global variables to manage global state. As you saw, we have managed to create a very simple to use and intuitive API for managing global state, just like hooks API. We have managed to avoid using Context API at all, so no need for Providers or Consumers.

You can do a lot with this approach, things like selecting/subscribing to deeply nested global state, persisting global state to a local storage, implement key based API for managing global state, implement useReducer like for global state and many many more.

I myself wrote an entire library for managing global state with this approach it includes all those mentioned features, here is the link if you want to check it out https://github.com/yezyilomo/state-pool.

Thank you for making to this point, I would like to hear from you, what do you think of this approach?.

Introducing a Simple React State Manager Based on Hooks

Yezy Ilomo — Wed, 06 Nov 2019 11:39:34 +0000

Introduction

Redux is a popular state manager in React but despite its popularity it has many problems, the most obvious ones being

Learning curve: Many developers found themselves lost in the Redux world of strange terms, weird entities and the connection between them: thunk, selectors, reducers, actions, middlewares, mapStateToProps, mapDispatchToProps, etc’. Learning all this stuff is not easy, and combining all of this together correctly takes time and practice.
Flow complexity: Many developers find it hard to follow the flow of a Redux app. There are just too many files and everything is just too fragmented that it has become quite hard to understand what is going on.
Boilerplate: There is a H-U-G-E amount of boilerplate code in every Redux application.

Despite having these problems I personally think the idea behind it is cleaver but the way it's designed makes it way complex and hard to grasp, developers expect it to be very simple just like useState hook. So I decided to come up with something which makes state management in react simple and fun to work with just like useState hook am calling it simple-react-state.

simple-react-state is a simple react state management library based on react hooks and react-redux which makes working with both local and global states completely painless, it also works pretty well with nested states.

Installing

yarn add simple-react-state

Getting Started

Using global state

import React from 'react';
import {
    Provider, configureStore, useGlobalState
} from 'simple-react-state';


let initialState = {
    user: {
        email: ""
    }
};

let store = configureStore({
    initialState: initialState
});

function UserInfo(props){
    const [user, updateUser] = useGlobalState('user');

    let setUserEmail = (e) => {
        updateUser({
            type: 'ASSIGN',
            field: 'email',
            value: e.target.value
        });
    }

    return (
        <div>
            User Email: {user.email}
            <br/>
            <input type="text" name="email" value={user.email} onChange={setUserEmail} />
        </div>
    );
}

const App = <Provider store={store}><UserInfo/></Provider>
ReactDOM.render(App, document.querySelector("#root"));

Using local state for the same example

//No need for Provider or configureStore because 
//we are not using global state here
import React from 'react';
import { useLocalState } from 'simple-react-state';


function UserInfo(props){
    const [user, updateUser] = useLocalState({email: ""})

    let setUserEmail = (e) => {
        updateUser({
            type: 'ASSIGN',
            field: 'email',
            value: e.target.value
        });
    }

    return (
        <div>
            User Email: {user.email}
            <br/>
            <input type="text" name="email" value={user.email} onChange={setUserEmail} />
        </div>
    );
}

const App = <UserInfo/>
ReactDOM.render(App, document.querySelector("#root"));

Supported action types are ASSIGN, PUSH, POP, REMOVE and FILTER. ASSIGN is for assigning a value to a field, PUSH, POP, REMOVE and FILTER are for arrays, these action types correspond with array methods.

setState

simple-react-state allows you to set global state with setState method from store object as

store.setState({
    type: 'ASSIGN',
    field: 'your field',
    value: 'your value'
});

Note: This should be used outside of your component.

With this in mind the first example above could be re-written to

import React from 'react';
import {
    Provider, configureStore,
    useGlobalState, useLocalState
} from 'simple-react-state';


let store = configureStore({});

store.setState(
    type: 'ASSIGN',
    field: 'user',
    value: {email: ''}
)

function UserInfo(props){
    const [user, updateUser] = useGlobalState('user');

    let setUserEmail = (e) => {
        updateUser({
            type: 'ASSIGN',
            field: 'email',
            value: e.target.value
        });
    }

    return (
        <div>
            User Email: {user.email}
            <br/>
            <input type="text" name="email" value={user.email} onChange={setUserEmail} />
        </div>
    );
}

const App = <Provider store={store}><UserInfo/></Provider>
ReactDOM.render(App, document.querySelector("#root"));

useGlobalState hook

useGlobalState works much like useState hook but it accepts a selection string and returns an array of three items which are state, updateState and dispatch, in most cases you will be using the first two items(state and updateState), the last item(dispatch) is for dispatching custom actions if you will have any. For example if you have a store with data like

{
    user: {
        name: 'Yezy',
        age: 24,
        account: {
            id: '23334',
            balance: 433.3
        }
    }
}

you can use useGlobalState hook to select a deeply nested state like

[age, updateAge, dispatch] = useGlobalState('user.age')

[account, updateAccount, dispatch] = useGlobalState('user.account')

[balance, updateBalance, dispatch] = useGlobalState('user.account.balance')

Note: If you pass nothing to useGlobalState the whole store is selected.

useLocalState hook

useLocalState works just like useState hook too, it accepts initial state as an argument except it returns an array of local state and updateState function(not setState like in useState hook).

let user = {
    name: 'Yezy',
    age: 24,
    account: {
        id: '23334',
        balance: 433.3
    }
}

[user, updateUser] = useLocalState(user)

updateState

updateState function works the same on both useGlobalState and useLocalState hooks, it dispatches an action to perform update on state, an action dispatched should have the following format

updateState({
    type: 'update type',
    field: 'your field',
    value: 'your value'
})

where type can be ASSIGN, PUSH, POP, REMOVE or FILTER

ASSIGN is the default action type, so if you haven't passed the type of your action that one will be used, therefore with this in mind

updateUser({
    field: 'email',
    value: 'user@email.com'
})

is the same as

updateUser({
    type: 'ASSIGN',
    field: 'email',
    value: 'user@email.com'
})

Pretty cool, right?

The project is just few days old so am still in the process of putting it together to make things more easier to users. Your opinions will be appreciated and if you are interested you are welcome to contribute, here is the GitHub repo simple-react-state.

REST + Some GraphQL with Django REST Framework

Yezy Ilomo — Thu, 31 Oct 2019 09:35:59 +0000

Since being introduced by Facebook, GraphQL has taken the API world by storm as an alternative to REST APIs. GraphQL fixes many problems that API developers and users have found with RESTful architecture. However, it also introduces a new set of challenges which need to be evaluated. Because GraphQL is not simply a evolutionary replacement for RESTful APIs, this post will show you a package which takes all the goods from GraphQL and put them into a RESTful architecture so that developers can benefit from both approaches. The name of the package is django-restql and it's developed on top of Django REST Framework but the idea can be implemented on any other framework.

As stated on its documentation, django-restql is a python library which allows you to turn your API made with Django REST Framework(DRF) into a GraphQL like API. With django-restql you will be able to

Send a query to your API and get exactly what you need, nothing more and nothing less.
Control the data you get, not the server.
Get predictable results, since you control what you get from the server.
Save the load of fetching unused data from the server(Over-fetching and Under-fetching problem).
Write(create & update) nested data of any level with flexibility.

Isn't it cool?.

Requirements

Python >= 3.5
Django >= 1.10
Django REST Framework >= 3.5

Installing

pip install django-restql

Querying Data

Using django-restql to query data is very simple, you just have to inherit the DynamicFieldsMixin class when defining a serializer.

from rest_framework import serializers
from django.contrib.auth.models import User

from django_restql.mixins import DynamicFieldsMixin

class UserSerializer(DynamicFieldsMixin, serializer.ModelSerializer):
    class Meta:
        model = User
        fields = ['id', 'username', 'email', 'groups']

A regular request returns all fields as specified on DRF serializer, in fact django-restql doesn't handle this request at all. Below is an example of a request without a query parameter, as you see all fields are retured as specified on UserSerializer.

GET /users

    [
      {
        "id": 1,
        "username": "yezyilomo",
        "email": "yezileliilomo@hotmail.com",
        "groups": [1,2]
      },
      ...
    ]

django-restql handle all GET requests with query parameter, this parameter is the one used to pass all fields to be included in a response. For example to select id and username fields from User model, send a request with a query parameter as shown below.

GET /users/?query={id, username}

    [
      {
        "id": 1,
        "username": "yezyilomo"
      },
      ...
    ]

django-restql support querying both flat and nested resources, so you can expand or query nested fields at any level as long as your field is defined as nested field on a serializer. For example you can query a country and region field from location.

GET /users/?query={id, username, location{country, region}}

    [
      {
        "id": 1,
        "username": "yezyilomo",
        "location": {
            "contry": "Tanzania",
            "region": "Dar es salaam"
        }
      },
      ...
    ]

django-restql got your back on querying iterable nested fields(one2many or many2many) too. For example if you want to expand groups field into id and name, here is how you would do it.

GET /users/?query={id, username, groups{id, name}}

    [
      {
        "id": 1,
        "username": "yezyilomo",
        "groups": [
            {
                "id": 2,
                "name": "Auth_User"
            }
            {
                "id": 3,
                "name": "Admin_User"
            }
        ]
      },
      ...
    ]

If a query contains nested field without expanding and it's not defined as a nested field on a serializer, django-restql will return its id or array of ids for the case of nested iterable field(one2many or many2many). For example on a request below location is a flat nested field(many2one) and groups is an iterable nested field(one2many or many2many).

GET /users/?query={id, username, location, group}

    [
      {
        "id": 1,
        "username": "yezyilomo",
        "location": 6,
        "groups": [1,2]
      },
      ...
    ]

Using `fields=[..]` and `exclude=[..]` kwargs

With django-restql you can specify fields to be included when instantiating a serializer, this provides a way to refilter fields on nested fields(i.e you can opt to remove some fields on a nested field). Below is an example which shows how you can specify fields to be included on nested resources.

from rest_framework import serializers
from django.contrib.auth.models import User
from django_restql.mixins import DynamicFieldsMixin

from app.models import Book, Course


class BookSerializer(DynamicFieldsMixin, serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = ['id', 'title', 'author']


class CourseSerializer(DynamicFieldsMixin, serializers.ModelSerializer):
    books = BookSerializer(many=True, read_only=True, fields=["title"])
    class Meta:
        model = Course
        fields = ['name', 'code', 'books']

GET /courses/

    [
      {
        "name": "Computer Programming",
        "code": "CS50",
        "books": [
          {"title": "Computer Programming Basics"},
          {"title": "Data structures"}
        ]
      },
      ...
    ]

As you see from the response above, the nested resource(book) has only one field(title) as specified on fields=["title"] kwarg during instantiating BookSerializer, so if you send a request like GET /course?query={name, code, books{title, author}} you will get an error that author field is not found because it was not included on fields=["title"] kwarg.

You can also specify fields to be excluded when instantiating a serializer by using exclude=[] as shown below

from rest_framework import serializers
from django_restql.mixins import DynamicFieldsMixin

from app.models import Book, Course


class BookSerializer(DynamicFieldsMixin, serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = ['id', 'title', 'author']


class CourseSerializer(DynamicFieldsMixin, serializers.ModelSerializer):
    books = BookSerializer(many=True, read_only=True, exclude=["author"])
    class Meta:
        model = Course
        fields = ['name', 'code', 'books']

GET /courses/

    [
      {
        "name": "Computer Programming",
        "code": "CS50",
        "books": [
          {"id": 1, "title": "Computer Programming Basics"},
          {"id": 2, "title": "Data structures"}
        ]
      },
      ...
    ]

From the response above you can see that author field has been excluded fom book nested resource as specified on exclude=["author"] kwarg during instantiating BookSerializer.

Note: fields=[..] and exclude=[] kwargs have no effect when you access the resources directly, so when you access books you will still get all fields i.e

GET /books/

    [
      {
        "id": 1,
        "title": "Computer Programming Basics",
        "author": "S.Mobit"
      },
      ...
    ]

So you can see that all fields have appeared as specified on fields = ['id', 'title', 'author'] on BookSerializer class.

Using `return_pk=True` kwargs

With django-restql you can specify whether to return nested resource pk or data. Below is an example which shows how we can specify fields to be included on nested resources.

from rest_framework import serializers
from django_restql.mixins import DynamicFieldsMixin

from app.models import Book, Course


class BookSerializer(DynamicFieldsMixin, serializers.ModelSerializer):
    class Meta:
        model = Book
        fields = ['id', 'title', 'author']


class CourseSerializer(DynamicFieldsMixin, serializers.ModelSerializer):
    books = BookSerializer(many=True, read_only=True, return_pk=True)
    class Meta:
        model = Course
        fields = ['name', 'code', 'books']

GET /course/

    [
      {
        "name": "Computer Programming",
        "code": "CS50",
        "books": [1,2]
      },
      ...
    ]

So you can see that on a nested field books book pks have been returned instead of books data as specified on return_pk=True kwarg on BookSerializer.

django-restql can do more than just querying data, you can use it to do data mutation too(creating and updating data), it even has support for nested data mutation, you can read more about this on its documentation here.

DEV Community: Yezy Ilomo

You’re One Import Away From Managing Global State In React

Intro

Questions

Now let’s go!…

store.useReducer

Selector & Patcher

State persistence

Feature & Advantages

Installing state pol

Conclusion

Server Side Rendering(SSR) With "State Pool" React State Manager

Introduction

Server rendering

Implementation

Security Considerations

You Can Definitely Use Global Variables To Manage Global State In React

Introduction

How is it possible?

Answers

Solution

Introducing State Pool✨🎉.

Installing

Getting Started

Updating Nested Global State

Selecting Nested State

Creating Global State Dynamically

useGlobalStateReducer

State Persistance

Non-Key Based Global State

Conclusion

Global state management in React with global variables and hooks. State management doesn't have to be so hard.

Introduction

So what's new?

Show me the code

What if components need to share state?

Introducing a Simple React State Manager Based on Hooks

Introduction

Installing

Getting Started

setState

useGlobalState hook

useLocalState hook

updateState

REST + Some GraphQL with Django REST Framework

Requirements

Installing

Querying Data

Using fields=[..] and exclude=[..] kwargs

Using return_pk=True kwargs

Using `fields=[..]` and `exclude=[..]` kwargs

Using `return_pk=True` kwargs