react-bulk-state

react-bulk-state is a utility for batch updating the state in a React application.

It uses immer and the set function from lodash-es for convenient state updates.

Additional features include saving and restoring previous states, as well as checking whether the state has changed.

Install

npm install react-bulk-state

# or

yarn add react-bulk-state

Usage

import { useBulkState } from 'react-bulk-state';

export function Component(){
  const { state,
    setState
  } = useBulkState({ count: 0, text: '', foo: { bar: { baz: 'hello' } } });
  const { count, text, foo } = state;
  return (
    <div>
      <p>count: {count}</p>
      <button
        onClick={() =>
          setState('count', (prev)=> prev+1)
        }
      >
        increment
      </button>
      <input
        value={text}
        onChange={(e) => setState('text', e.target.value)}
      />
      <button
        onClick={() =>
          setState('foo.bar.baz', (current) => current + ' world!')
        }
      >
        {foo.bar.baz}
      </button>
    </div>
  );
}

Reference

const {
    state,
    savedState,
    isMatched,
    saveCurrentValue,
    init,
    setBulkState,
    setState,
    setByImmer,
    restoreToInit,
    restoreToSaved,
    restoreByKeyNames,
  } = useBulkState<T extends object>(initialState: T = {});

• state: T— The current state.
• savedState: T— The value of the state when saveCurrentValue is called.
• isMatched: boolean— Whether the current state is the same as the saved state.
• saveCurrentValue: void— Save the current state.
• init(next?: T | ((prev: T) => T) | undefined): void— Re-Initialize the state and savedState.
• setBulkState(next: T | ((prev: T) => T)): void— Update the state.
• setState(target: PathString, (current: Value | (current: Value) => Value), afterChange?: (Draft<T>) => void): void— Update the state by path.

  // ...
  const { state,
    setState
  } = useBulkState({ count: 0, text: '', foo: { bar: { baz: 'hello' } } });
  // ...
  setState('foo.bar.baz', (current) => current + ' world!', (draft) => {
    // draft.foo.bar.baz === 'hello world!'
    // then do something with draft(like using immer)
  })

• setByImmer: (Draft<T>): void— Update the state by immer.
• restoreToInit: void— Restore the state to the initial state.
• restoreToSaved: void— Restore the state to the saved state.
• restoreByKeyNames: void— Restore the state to the saved state by key names.