react-hooks-global-state

react-hooks-global-state

Simple global state for React by Hooks API

Background

React Hooks API looks promising. This is an experimental library to use React Hooks API for global state.

Install

npm install react-hooks-global-state

Usage

setState style

import React from 'react';
import { createGlobalState } from 'react-hooks-global-state';

const initialState = { counter: 0 };
const { GlobalStateProvider, useGlobalState } = createGlobalState(initialState);

const Counter = () => {
  const [value, update] = useGlobalState('counter');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => update(v => v + 1)}>+1</button>
      <button onClick={() => update(v => v - 1)}>-1</button>
    </div>
  );
};

const App = () => (
  <GlobalStateProvider>
    <Counter />
    <Counter />
  </GlobalStateProvider>
);

reducer style

import React from 'react';
import { createStore } from 'react-hooks-global-state';

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment': return { ...state, counter: state.counter + 1 };
    case 'decrement': return { ...state, counter: state.counter - 1 };
    default: return state;
  }
};
const initialState = { counter: 0 }; // initialState is not optional.
const { GlobalStateProvider, dispatch, useGlobalState } = createStore(reducer, initialState);

const Counter = () => {
  const [value] = useGlobalState('counter');
  return (
    <div>
      <span>Counter: {value}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
    </div>
  );
};

const App = () => (
  <GlobalStateProvider>
    <Counter />
    <Counter />
  </GlobalStateProvider>
);

Example

The examples folder contains a working example. You can run it with

PORT=8080 npm run examples:minimal

and open http://localhost:8080 in your web browser.

You can also try it in codesandbox.io: 01 02 03 04 05 06 07 08 09 10 11

Limitations

• Due to the implementation relying on observedBits in the Context API, the performance may drop down if a state holds more than 31 items. Reference: #1

Blogs

• TypeScript-aware React hooks for global state
• An alternative to React Redux by React Hooks API (For both JavaScript and TypeScript)
• Redux middleware compatible React Hooks library for easy global state management
• React Hooks Tutorial on pure useReducer + useContext for global state like Redux and comparison with react-hooks-global-state