[NOT MAINTAINED] Simple global state for React with Hooks API without Context API
MIT License
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