React Sync Reducer

A library for creating reducers that can be efficiently accessed via context. Type-safe and compatible with Concurrent React.

Motivation

In React applications, managing state by combining useReducer and useContext can sometimes lead to performance issues. This is because each context-consuming component is re-rendered whenever the context value changes. React Sync Reducer can be used to solve this issue.

Installation

1npm install react-sync-reducer

Documentation

Call the createReducer function outside of your React components

1import { createReducer } from 'react-sync-reducer';
2import type { Action } from 'react-sync-reducer';
3
4interface State {
5  value: number;
6}
7
8type Actions = Action<'increment'> | Action<'setValue', number>;
9
10const { ReducerProvider, useDispatch, useSelector } = createReducer(
11  (state: State, action: Actions) => {
12    switch (action.type) {
13      case 'increment': {
14        return {
15          ...state,
16          value: state.value + 1
17        };
18      }
19      case 'setValue': {
20        return {
21          ...state,
22          value: action.payload
23        };
24      }
25    }
26  }
27);

Wrap your child components with the returned ReducerProvider and set the initial state

1function Component() {
2  return (
3    <ReducerProvider initialState={{ value: 0 }}>
4      <DispatchComponent />
5      <SelectorComponent />
6    </ReducerProvider>
7  );
8}

Use the returned useDispatch and useSelector hooks in your child components

1function DispatchComponent() {
2  const dispatch = useDispatch();
3
4  return (
5    <>
6      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
7      <button onClick={() => dispatch({ type: 'setValue', payload: 99 })}>
8        Set Value to 99
9      </button>
10    </>
11  );
12}
13
14function SelectorComponent() {
15  const value = useSelector((state) => state.value);
16
17  return <p>The current value is: {value}</p>;
18}