# react-hooked-reducer

> > This package is a PoC and in development

Latest version **0.2.0** (published 2018-12-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hooked-reducer
pnpm add react-hooked-reducer
yarn add react-hooked-reducer
bun add react-hooked-reducer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2018-12-04 |
| First published | 2018-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Thomas Roch |
| Maintainers | troch |

## Links

- npm: https://www.npmjs.com/package/react-hooked-reducer
- Repository: https://github.com/troch/react-hooked-reducer
- Homepage: https://github.com/troch/react-hooked-reducer#readme
- Issues: https://github.com/troch/react-hooked-reducer/issues
- npm.io page: https://npm.io/package/react-hooked-reducer

## Recent versions

- 0.2.0 (latest) — 2018-12-04
- 0.1.1 — 2018-12-03
- 0.1.0 — 2018-12-03

## README

# react-hooked-reducer

> This package is a PoC and in development

Use reducers in React, like with `useReducer` but with the following additional benefits:

-   Receive actions from a `store`
-   Optionally embed your reducer inside a `store` and fully benefit from Redux developing tools

```
yarn add react-hooked-reducer
# or
npm install react-hooked-reducer
```

[See it in action on CodeSandbox](https://codesandbox.io/s/github/troch/react-hooked-reducer/tree/master/example)

## Why

Using global reducers for React components has several disadvantages:

-   You end up having to manage **initialisation or reset actions**
-   Having multiple instances of a same component requires you to use add and remove actions, to identify actions and to add a wrapping reducer.

The solution is to couple reducers to their component instances, like in [react-local-reducer](https://github.com/troch/react-local-reducer) or the newly created react hook [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer)

However, by doing so we loose the developer experience that comes with Redux: inspecting actions and state, time travelling.

**This package allows to have the best of both: local reducers with great DX!**

## Usage

#### hookedReducersEnhancer

For this package to work, you need to enhance your store with `hookedReducersEnhancer`:

```js
import { hookedReducersEnhancer } from "react-hooked-reducer"

const store = createStore(reducer, initialState, hookedReducersEnhancer)
```

See [https://redux.js.org/api/compose](https://redux.js.org/api/compose) for more info on how to compose store enhancers together.

#### useReducer(reducer, initialState, store, reducerId, hooked)

-   `reducer`: your reducer
-   `initialState`: the initial state for your reducer
-   `store`: your store instance
-   `reducerId`: an unique ID to identify your reducer
-   `hooked`: if `true`, your reducer will be "embedded" inside your store.

#### Things you can do

-   You can set `hooked` to `true` in development, and `false` in production: when your reducer is not attached to your store, changes in its state won't cause a new store state to be emitted.
-   You can create your own custom hook to avoid having to pass down `store`: add it to a custom context and then use `useContext`:

    ```js
    import { useHookedReducer } from "react-hooked-reducer"
    import StoreContext from "./context"

    export default function useReducer(reducer, initialState, reducerId) {
        const store = useContext(StoreContext)
        return useHookedReducer(
            reducer,
            initialState,
            store,
            reducerId,
            process.env.NODE_ENV === "development"
        )
    }
    ```

#### Example

```js
import { useReducer } from "react-hooked-reducer"

function Counter({ store, id, embedded = false }) {
    const [count, dispatch] = useReducer(
        (state, action) => {
            if (action.type === "+") {
                return state + 1
            }
            if (action.type === "-") {
                return state - 1
            }
            return state
        },
        0,
        store,
        id,
        embedded
    )

    return (
        <div>
            <button onClick={() => dispatch({ type: "-" })}>-</button> {count}{" "}
            <button onClick={() => dispatch({ type: "+" })}>+</button>
        </div>
    )
}
```

---
_Source: https://npm.io/package/react-hooked-reducer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._