React-use-bireducer NPM

🔀 React use bireducer

React hook for managing effectful reducers.

Motivation

When your application gets bigger, it is hard to manage both state changes and effectful computations. I find the Model-View-Update pattern (which the Elm architecture is based on) really effective for this kind of task. useBireducer implements this pattern by combining two reducers (hence the name): a state reducer and an effect reducer.

The state reducer is really close to useReducer, except that it returns the new state AND the effects to execute:

type StateReducer<S, A, E> = (state: S, action: A) => [S, Array<E>];

The effect reducer just executes effects and can return a cleanup function. This cleanup function is called when the component unmounts:

type EffectReducer<E, A> = (effect: E, dispatch: React.Dispatch<A>) => void | (() => void);

This pattern helps you to separate state changes from effectful computations. It also makes your tests stronger.

Installation

yarn add react-use-bireducer
# or
npm install react-use-bireducer

Usage

import {useBireducer} from "react-use-bireducer";

const [state, dispatch] = useBireducer(stateReducer, effectReducer, defaultState);

See a complete example on CodeSandbox.

If you want to see an example in a real world application, have a look at react-pin-field.

Development

Development environment is managed by Nix. First you need to install it:

curl -L https://nixos.org/nix/install | sh

Then you can start your development environment by spawning a Nix shell:

nix-shell

Now you should be able to clone the repo and install Node.js dependencies:

git clone https://github.com/soywod/react-use-bireducer.git
cd react-use-bireducer
yarn

You can leave the development environment either by killing your terminal or by entering the command exit.

Tests

Tests are handled by Jest (.test files) and React Testing Library (.spec files).

yarn test

Similar projects

useEffectReducer: the state reducer exposes a third argument called exec to schedule effects
useElmish: it is a mix between useEffectReducer and useBireducer