# @solid-primitives/reducer

> Provides a createReducer primitive for updating state in a predictable way.

Latest version **0.0.101** (published 2022-08-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @solid-primitives/reducer
pnpm add @solid-primitives/reducer
yarn add @solid-primitives/reducer
bun add @solid-primitives/reducer
```

## Health

**Score 45/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.101 |
| Published | 2022-08-26 |
| First published | 2022-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1559 |
| Author | Tiago Cavalcante |
| Maintainers | thetarnav., lexlohr, davedbase |
| Keywords | solid, primitives |

## Links

- npm: https://www.npmjs.com/package/@solid-primitives/reducer
- Repository: https://github.com/solidjs-community/solid-primitives
- Homepage: https://github.com/solidjs-community/solid-primitives/tree/main/packages/reducer#readme
- Issues: https://github.com/solidjs-community/solid-primitives/issues
- npm.io page: https://npm.io/package/@solid-primitives/reducer

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.0.101 (latest) — 2022-08-26
- 0.0.100 — 2022-05-06

## README

# @solid-primitives/reducer

[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/reducer?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/reducer)
[![version](https://img.shields.io/npm/v/@solid-primitives/reducer?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/reducer)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-1.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

Provides a createReducer primitive for updating state in a predictable way.
SolidJS equivalent of React's [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer).

## Installation

```bash
npm install @solid-primitives/reducer
# or
yarn add @solid-primitives/reducer
```

## When to use it

`createReducer` is useful for:

1. DRY the code of the `set`s of a signal
2. Ensure the signal is always in a valid state
3. Make it easier to understand for what a signal is used

## How to use it

```ts
const [accessor, dispatch] = createReducer<State>(
  dispatcher: (state: State, ...args) => State,
  initialState: State
);
```

`dispatcher` is the reducer, it's 1st parameter always is the current state of the reducer and it returns the new state of the reducer.

`accessor` can be used as you use a normal signal: `accessor()`. It contains the state of the reducer.

`dispatch` is the action of the reducer, it is a sort of `setSignal` that does NOT receive the new state, but instructions to create it from the current state.

For example:

```tsx
function Counter() {
  const [count, double] = createReducer(c => c * 2, 1);

  return <button onClick={double}>{count()}</button>;
}
```

The reducer also can receive other arguments:

```tsx
const dispatcher = (c: number, type: "double" | "increment") => {
  if (type == "double") {
    return c * 2;
  } else {
    return c + 1;
  }
};

function Counter() {
  const [count, handleClick] = createReducer(dispatcher, 1);

  return (
    <div>
      <span>{count()}</span>

      <button onClick={() => handleClick("double")}>Double</button>
      <button onClick={() => handleClick("increment")}>Increment</button>
    </div>
  );
}
```

React allows a 3rd argument:

```ts
const fib = (n: number) => (n < 2 ? n : fib(n - 1) + fib(n - 2));
const nextFib = (n: number) => Math.round((n * (1 + sqrt(5))) / 2);

const [fibonacci, nextFibonacci] = useReducer(nextFib, 1, fib);
```

You need to convert that to the following format:

```ts
const [fibonacci, nextFibonacci] = createReducer(nextFib, fib(1));
```

## Demo

https://codesandbox.io/s/solid-primitives-reducer-demo-7nrfs2?file=/index.tsx

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)

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