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

``bash
npm install react-hooks-global-state
`

Usage

$3

`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 (


const App = () => (
<>



);
`

$3

`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 (


const App = () => (
<>



);
`

API

$3

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

* initialState State

#### Examples

`javascript
import { createGlobalState } from 'react-hooks-global-state';

const { useGlobalState } = createGlobalState({ count: 0 });

const Component = () => {
const [count, setCount] = useGlobalState('count');
...
};
`

$3

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

* reducer Reducer\
* initialState State (optional, default (reducer as any)(undefined,{type:undefined}))
* enhancer any?

#### Examples

`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\

$3

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

`bash
PORT=8080 npm run examples:01_minimal
``

and open 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

Community Wiki

* Persistence
* Optional initialState