react-hooks-global-state
Version:
Simple global state for React with Hooks API without Context API
212 lines (154 loc) • 7.21 kB
Markdown
[](https://github.com/dai-shi/react-hooks-global-state/actions?query=workflow%3ACI)
[](https://www.npmjs.com/package/react-hooks-global-state)
[](https://bundlephobia.com/result?p=react-hooks-global-state)
[](https://discord.gg/MrQdmzd)
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.
* 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.
```bash
npm install react-hooks-global-state
```
```javascript
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 />
</>
);
```
```javascript
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 />
</>
);
```
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
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
* `initialState` **State**
```javascript
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 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.
* `reducer` **Reducer\<State, Action>**
* `initialState` **State** (optional, default `(reducer as any)(undefined,{type:undefined})`)
* `enhancer` **any?**
```javascript
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**
* **deprecated**: useStoreState instead
The [examples](examples) folder contains working examples.
You can run one of them with
```bash
PORT=8080 npm run examples:01_minimal
```
and open <http://localhost:8080> in your web browser.
You can also try them in codesandbox.io:
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/01\_minimal)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/02\_typescript)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/03\_actions)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/04\_fetch)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/05\_onmount)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/06\_reducer)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/07\_middleware)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/08\_thunk)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/09\_comparison)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/10\_immer)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/11\_deep)
[](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/13\_persistence)
* [TypeScript-aware React hooks for global state](https://blog.axlight.com/posts/typescript-aware-react-hooks-for-global-state/)
* [An alternative to React Redux by React Hooks API (For both JavaScript and TypeScript)](https://blog.axlight.com/posts/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](https://blog.axlight.com/posts/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](https://blog.axlight.com/posts/react-hooks-tutorial-for-pure-usereducer-usecontext-for-global-state-like-redux-and-comparison/)
* [Four patterns for global state with React hooks: Context or Redux](https://blog.axlight.com/posts/four-patterns-for-global-state-with-react-hooks-context-or-redux/)
* [Steps to Develop Global State for React With Hooks Without Context](https://blog.axlight.com/posts/steps-to-develop-global-state-for-react/)
## Community Wiki
* [Persistence](https://github.com/dai-shi/react-hooks-global-state/wiki/Persistence)
* [Optional initialState](https://github.com/dai-shi/react-hooks-global-state/wiki/Optional-initialState)