Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/dai-shi/react-hooks-global-state

[NOT MAINTAINED] Simple global state for React with Hooks API without Context API
https://github.com/dai-shi/react-hooks-global-state

function-components hooks-api-react react state-management typescript

Last synced: 7 days ago
JSON representation

[NOT MAINTAINED] Simple global state for React with Hooks API without Context API

Awesome Lists containing this project

README 

        
This project is no longer maintained.

Please directly use [Zustand](https://github.com/pmndrs/zustand).



---



# react-hooks-global-state



[![CI](https://img.shields.io/github/actions/workflow/status/dai-shi/react-hooks-global-state/ci.yml?branch=main)](https://github.com/dai-shi/react-hooks-global-state/actions?query=workflow%3ACI)

[![npm](https://img.shields.io/npm/v/react-hooks-global-state)](https://www.npmjs.com/package/react-hooks-global-state)

[![size](https://img.shields.io/bundlephobia/minzip/react-hooks-global-state)](https://bundlephobia.com/result?p=react-hooks-global-state)

[![discord](https://img.shields.io/discord/627656437971288081)](https://discord.gg/MrQdmzd)



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



### setState style



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

    


      Counter: {count}

      {/* update state by passing callback function */}

       setCount(v => v + 1)}>+1

      {/* update state by passing new value */}

       setCount(count - 1)}>-1

    


  );

};



const App = () => (

  <>

    

    

  >

);

```



### reducer style



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

    


      Counter: {value}

       dispatch({ type: 'increment' })}>+1

       dispatch({ type: 'decrement' })}>-1

    


  );

};



const App = () => (

  <>

    

    

  >

);

```



## 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



*   `initialState` **State** 



#### Examples



```javascript

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



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



### useGlobalState



useGlobalState created by createStore is deprecated.



Type: function (stateKey: StateKey): any



**Meta**



*   **deprecated**: useStoreState instead



## Examples



The [examples](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](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/01\_minimal)

[02](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/02\_typescript)

[03](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/03\_actions)

[04](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/04\_fetch)

[05](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/05\_onmount)

[06](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/06\_reducer)

[07](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/07\_middleware)

[08](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/08\_thunk)

[09](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/09\_comparison)

[10](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/10\_immer)

[11](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/11\_deep)

[13](https://codesandbox.io/s/github/dai-shi/react-hooks-global-state/tree/main/examples/13\_persistence)



## Blogs



*   [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)