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 { 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 = () => (
  <div>
    <Counter />
    <Counter />
  </div>
);

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 { 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 = () => (
  <div>
    <Counter />
    <Counter />
  </div>
);

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.

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

Changelog

[0.2.0] - 2018-11-09

Changed

• Hacky/dirty Redux DevTools Extension support
• Fix type definition