dai-shi / React Hooks Global State
Licence: mit
Simple global state for React with Hooks API without Context API
Stars: ✭ 605
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to React Hooks Global State
Redux Machine
A tiny library (12 lines) for creating state machines in Redux apps
Stars: ✭ 338 (-44.13%)
Mutual labels: state-management
Dutier
The immutable, async and hybrid state management solution for Javascript applications.
Stars: ✭ 401 (-33.72%)
Mutual labels: state-management
React Hooks
Essential set of React Hooks for convenient Web API consumption and state management.
Stars: ✭ 515 (-14.88%)
Mutual labels: state-management
Ngrx Actions
⚡️ Actions and Reducer Utilities for NGRX
Stars: ✭ 348 (-42.48%)
Mutual labels: state-management
States rebuilder
a simple yet powerful state management technique for Flutter
Stars: ✭ 372 (-38.51%)
Mutual labels: state-management
Vue Stash
Easily share reactive data between your Vue components.
Stars: ✭ 412 (-31.9%)
Mutual labels: state-management
Grox
Grox helps to maintain the state of Java / Android apps.
Stars: ✭ 336 (-44.46%)
Mutual labels: state-management
Roxie
Lightweight Android library for building reactive apps.
Stars: ✭ 441 (-27.11%)
Mutual labels: state-management
Pvm
Build workflows, activities, BPMN like processes, or state machines with PVM.
Stars: ✭ 348 (-42.48%)
Mutual labels: state-management
Machinery
State machine thin layer for structs (+ GUI for Phoenix apps)
Stars: ✭ 367 (-39.34%)
Mutual labels: state-management
Jumpstate
Jumpstate is a simple and powerful state management utility for Redux.
Stars: ✭ 429 (-29.09%)
Mutual labels: state-management
React Sweet State
Shared state management solution for React
Stars: ✭ 537 (-11.24%)
Mutual labels: state-management
Beedle
A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps
Stars: ✭ 329 (-45.62%)
Mutual labels: state-management
Konfig
Composable, observable and performant config handling for Go for the distributed processing era
Stars: ✭ 597 (-1.32%)
Mutual labels: state-management
Cubit
Cubit is a lightweight state management solution. It is a subset of the bloc package that does not rely on events and instead uses methods to emit new states.
Stars: ✭ 539 (-10.91%)
Mutual labels: state-management
Easy Peasy
Vegetarian friendly state for React
Stars: ✭ 4,525 (+647.93%)
Mutual labels: state-management
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.
- Redux DevTools Extension could be used in a simple scenario.
- Concurrent Mode support (Experimental)
- Undocumented
useGlobalStateProvider
supports CM without React Context.
- Undocumented
Install
npm install react-hooks-global-state
Usage
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, useGlobalState } = createStore(reducer, initialState);
const Counter = () => {
const [value] = useGlobalState('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
Parameters
-
initialState
State
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
In additon to useGlobalState
which is the same hook as in createGlobalState,
a store has getState
and dispatch
.
A store works somewhat similarly to Redux, but not the same.
Parameters
-
reducer
Reducer<State, Action> -
initialState
State (optional, default(reducer as any)(undefined,{type:undefined})
) -
enhancer
Enhancer<any>?
Examples
import { createStore } from 'react-hooks-global-state';
const initialState = { count: 0 };
const reducer = ...;
const store = createStore(reducer, initialState);
const { useGlobalState } = store;
const Component = () => {
const [count, setCount] = useGlobalState('count');
...
};
Examples
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 12 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].