This project is no longer maintained. Please directly use Zustand.
Simple global state for React with Hooks API without Context API
This is a library to provide a global state with React Hooks. It has following characteristics.
npm install react-hooks-global-state
import React from 'react';
import { createGlobalState } from 'react-hooks-global-state';
const initialState = { count: 0 };
const { useGlobalState } = createGlobalState(initialState);
const Counter = () => {
const [count, setCount] = useGlobalState('count');
return (
<div>
<span>Counter: {count}</span>
{/* update state by passing callback function */}
<button onClick={() => setCount(v => v + 1)}>+1</button>
{/* update state by passing new value */}
<button onClick={() => setCount(count - 1)}>-1</button>
</div>
);
};
const App = () => (
<>
<Counter />
<Counter />
</>
);
import React from 'react';
import { createStore } from 'react-hooks-global-state';
const reducer = (state, action) => {
switch (action.type) {
case 'increment': return { ...state, count: state.count + 1 };
case 'decrement': return { ...state, count: state.count - 1 };
default: return state;
}
};
const initialState = { count: 0 };
const { dispatch, useStoreState } = createStore(reducer, initialState);
const Counter = () => {
const value = useStoreState('count');
return (
<div>
<span>Counter: {value}</span>
<button onClick={() => dispatch({ type: 'increment' })}>+1</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
</div>
);
};
const App = () => (
<>
<Counter />
<Counter />
</>
);
Create a global state.
It returns a set of functions
useGlobalState
: a custom hook works like React.useStategetGlobalState
: a function to get a global state by key outside ReactsetGlobalState
: a function to set a global state by key outside Reactsubscribe
: a function that subscribes to state changesinitialState
State import { createGlobalState } from 'react-hooks-global-state';
const { useGlobalState } = createGlobalState({ count: 0 });
const Component = () => {
const [count, setCount] = useGlobalState('count');
...
};
Create a global store.
It returns a set of functions
useStoreState
: a custom hook to read store state by keygetState
: a function to get store state by key outside Reactdispatch
: a function to dispatch an action to storeA store works somewhat similarly to Redux, but not the same.
reducer
Reducer\<State, Action> initialState
State (optional, default (reducer as any)(undefined,{type:undefined})
)enhancer
any? import { createStore } from 'react-hooks-global-state';
const initialState = { count: 0 };
const reducer = ...;
const store = createStore(reducer, initialState);
const { useStoreState, dispatch } = store;
const Component = () => {
const count = useStoreState('count');
...
};
Returns Store\<State, Action>
useGlobalState created by createStore is deprecated.
Type: function (stateKey: StateKey): any
Meta
The examples folder contains working examples. You can run one of them with
PORT=8080 npm run examples:01_minimal
and open http://localhost:8080 in your web browser.
You can also try them in codesandbox.io: 01 02 03 04 05 06 07 08 09 10 11 13