react-hooks-global-state
Simple global state for React with Hooks API without Context API
Introduction
This is a library to provide a global state with React Hooks. It has following characteristics.
- Optimization for shallow state getter and setter.
- The library cares the state object only one-level deep.
- TypeScript type definitions
- A creator function creates hooks with types inferred.
- Redux middleware support to some extent
- Some of libraries in Redux ecosystem can be used.
Install
npm install react-hooks-global-stateUsage
setState style
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 />
</>
);reducer style
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 />
</>
);API
createGlobalState
Create a global state.
It returns a set of functions
-
useGlobalState: a custom hook works like React.useState -
getGlobalState: a function to get a global state by key outside React -
setGlobalState: a function to set a global state by key outside React -
subscribe: a function that subscribes to state changes
Parameters
-
initialStateState
Examples
import { createGlobalState } from 'react-hooks-global-state';
const { useGlobalState } = createGlobalState({ count: 0 });
const Component = () => {
const [count, setCount] = useGlobalState('count');
...
};createStore
Create a global store.
It returns a set of functions
-
useStoreState: a custom hook to read store state by key -
getState: a function to get store state by key outside React -
dispatch: a function to dispatch an action to store
A store works somewhat similarly to Redux, but not the same.
Parameters
-
reducerReducer<State, Action> -
initialStateState (optional, default(reducer as any)(undefined,{type:undefined})) -
enhancerany?
Examples
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
useGlobalState created by createStore is deprecated.
Type: function (stateKey: StateKey): any
Meta
- deprecated: useStoreState instead
Examples
The examples folder contains working examples. You can run one of them with
PORT=8080 npm run examples:01_minimaland 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
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
- Four patterns for global state with React hooks: Context or Redux
- Steps to Develop Global State for React With Hooks Without Context