https://github.com/soywod/react-use-bireducer
React hook for managing effectful reducers.
https://github.com/soywod/react-use-bireducer
react react-effect react-hook react-reducer
Last synced: 8 months ago
JSON representation
React hook for managing effectful reducers.
- Host: GitHub
- URL: https://github.com/soywod/react-use-bireducer
- Owner: soywod
- License: mit
- Created: 2022-05-26T10:32:53.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-05-27T20:39:05.000Z (over 3 years ago)
- Last Synced: 2024-12-15T22:29:11.248Z (10 months ago)
- Topics: react, react-effect, react-hook, react-reducer
- Language: TypeScript
- Homepage:
- Size: 232 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# 🔀 React use bireducer [](https://github.com/soywod/react-use-bireducer/actions/workflows/test.yaml) [](https://app.codecov.io/gh/soywod/react-use-bireducer) [](https://www.npmjs.com/package/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](https://guide.elm-lang.org/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:
```typescript
type StateReducer = (state: S, action: A) => [S, Array];
```
The effect reducer just executes effects and can return a cleanup
function. This cleanup function is called when the component unmounts:
```typescript
type EffectReducer = (effect: E, dispatch: React.Dispatch) => void | (() => void);
```
This pattern helps you to separate state changes from effectful
computations. It also makes your tests stronger.
## Installation
```bash
yarn add react-use-bireducer
# or
npm install react-use-bireducer
```
## Usage
```typescript
import {useBireducer} from "react-use-bireducer";
const [state, dispatch] = useBireducer(stateReducer, effectReducer, defaultState);
```
See a complete example on
[CodeSandbox](https://codesandbox.io/s/react-use-bireducer-example-20n30w?file=/src/App.tsx).
If you want to see an example in a real world application, have a look
at
[react-pin-field](https://github.com/soywod/react-pin-field/blob/49418994ae39c3aac67d2b4f94082a20effcea4b/lib/src/pin-field/pin-field.tsx#L251).
## Development
Development environment is managed by [Nix](https://nixos.org/). First
you need to install it:
```bash
curl -L https://nixos.org/nix/install | sh
```
Then you can start your development environment by spawning a Nix
shell:
```bash
nix-shell
```
Now you should be able to clone the repo and install Node.js
dependencies:
```bash
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](https://jestjs.io/) (`.test` files) and
[React Testing
Library](https://testing-library.com/docs/react-testing-library/intro/)
(`.spec` files).
```bash
yarn test
```
## Similar projects
- [`useEffectReducer`](https://github.com/davidkpiano/useEffectReducer):
the state reducer exposes a third argument called `exec` to schedule
effects
- [`useElmish`](https://github.com/ncthbrt/react-use-elmish): it is a
mix between `useEffectReducer` and `useBireducer`
## Sponsoring
[](https://github.com/sponsors/soywod)
[](https://www.paypal.com/paypalme/soywod)
[](https://ko-fi.com/soywod)
[](https://www.buymeacoffee.com/soywod)
[](https://liberapay.com/soywod)