Enhance your app with global state

In order to use this simple state management in your app you just need to wrap it with our StateProvider created above and pass reducer and initialState like this:

import { StateProvider } from '../state';

const App = () => {
  const initialState = {
    theme: { primary: 'green' }
  };
  
  const reducer = (state, action) => {
    switch (action.type) {
      case 'changeTheme':
        return {
          ...state,
          theme: action.newTheme
        };
        
      default:
        return state;
    }
  };
  
  return (
    <StateProvider initialState={initialState} reducer={reducer}>
        // App content ...
    </StateProvider>
  );
}

Then use and update the state inside your app

Now you have unlimited access to your global state in every component of your app:

import { useStateValue } from './state';

const ThemedButton = () => {
  const [{ theme }, dispatch] = useStateValue();
  return (
    <Button
      primaryColor={theme.primary}
      onClick={() => dispatch({
        type: 'changeTheme',
        newTheme: { primary: 'blue'}
      })}
    >
      Make me blue!
    </Button>
  );
}

The only limitation is that this useStateValue function must be called inside functional component. Because it calls a useContext hook inside.

If you would like to access state in class based component, you have two options. Either use the Consumer as mention above in the React Context API section or less verbose contextType feature like this:

import React, { Component } from 'react';
import { StateContext } from './state';
class ThemedButton extends Component {
  static contextType = StateContext;  render() {
    const [{ theme }, dispatch] = this.context;    return (
      <Button
        primaryColor={theme.primary}
        onClick={() => dispatch({
          type: 'changeTheme',
          newTheme: { primary: 'blue'}
        })}
      >
        Make me blue!
      </Button>
    );
  }
}

And that’s it! Isn’t it amazing? You really don’t need to use Redux or any other external state library anymore. Everything you need is inside React.

But what about splitting reducer to more then one?

There is an easy answer. For more complex applications it may be handy to have multiple reducers. Well, the reducer (the one passed as a prop to StateProvider) is completely in your hands. Personally I would go this way:

import userReducer from './reducers/user';
import basketReducer from './reducers/basket';
const mainReducer = ({ user, basket }, action) => ({
  user: userReducer(user, action),
  basket: basketReducer(basket, action)
});

And what about middleware?

Technically the middleware is a function called just before the dispatched action reaches the reducer. I would do something like this:

import userReducer from './reducers/user';
import basketReducer from './reducers/basket';const mainReducer = ({ user, basket }, action) => {
  // middleware goes here, i.e calling analytics service, etc.  
  return {
    user: userReducer(user, action),
    basket: basketReducer(basket, action)
  };
});

React-simply introduction

You can find my minimalistic state management gadget in my React-simply repository on Github.

React-simply will become my set of useful tools, gadgets and components that I use to make my React and React Native development easier, faster and more funny.

This repo is build on Lerna, but contains only state package so far. I will be adding other useful packages continuously when they are production ready. Don’t worry, I will let you know in my future articles.

NPM package

You can install my state package from NPM registry:

npm i @react-simply/state

Your feedback matters!

If you like my story and you would like to encourage me in writing more often, please clap, share and comment. Your interest is the best motivation to share my thoughts.