Transducer utilities for Redux.

Overview

redux-transducers

build status npm version

Transducer utilities for Redux.

  • transducerProtocol lets you dispatch using transducers.
  • transduce() lets you create reducers from transducers.

Conforms to the transducer protocol used by transducers.js and transducers-js, and is tested against those libraries.

npm install --save redux-transducers

Using transducers to dispatch actions

transducerProtocol(createStore)

This is a higher-order store that enables a Redux store to be dispatched via a transducer. Higher-order stores aren't currently documented (it's coming) but they're simple to use:

const newCreateStore = transducerProtocol(createStore);
const store = newCreateStore(reducer, initialState);

That's it! Now you can dispatch actions to your stores using transducers.

NOTE: If you're using other higher-order stores, like the forthcoming applyMiddleware(), transducerProtocol must come first in the chain. This is because, in order to conform to the transducer protocol, and for compatibility with popular transducer libraries, the store returned by transducerProtocol() is not a plain object. This shouldn't be a problem. Just remember to always put first.

// This won't work
const newCreateStore = compose(applyMiddleware(m1, m2, m3), transducerProtocol, createStore);
// Do this instead
const newCreateStore = compose(transducerProtocol, applyMiddleware(m1, m2, m3), createStore);

How it works

The best way to explain this is probably just to show you an example:

Example: mapping strings to actions

// Using the transducers.js library
const actions = [
  'Use Redux',
  'Weep with joy',
  'Mutate inside the reducer',
  null,
  'Learn about higher-order stores',
  { type: 'REMOVE_TODO', payload: 2 },
  'Learn about middleware'
];

into(store, compose(
  keep(),
  map(a => typeof a === 'string'
    ? { type: 'ADD_TODO', payload: { text: a } }
    : a
  ),
  filter(a => !(
    a.type === 'ADD_TODO' &&
    /(M|m)utat(e|ion)/g.test(a.payload.text)
  ))
), actions);

This example uses the into(to, xform, from) function of transducers.js. It applies a transformation to each action in a collection — in this case an array, but could be any iterable data structure — and "pours" it into the target collection — in this case, a store — by performing a dispatch. The call to store.dispatch() is analogous to a call to array.push().

Using transducers to create reducers

transduce(xform, reducer)

transduce() creates a reducer from a transducer and a base reducer. The transformation is applied before being sent to the base reducer.

Caveat: transduce() does not support stateful transducers

Transducers typically operate on collections. It's possible to use transducers to transform asynchronous streams, but it requires the use of local state that persists over time. We can't do this, because Redux makes a hard assumption that the reducer is a pure function — it must return the same result for a given state and action, every time.

For this reason, transduce() transforms actions one at a time. That means transducers like filter() and map() work fine, but take() and dedupe() do not.

This caveat does not apply to transducerProtocol(), which works with all transducers, stateful or otherwise, because it does its transforms before they reach the reducer.

Example: filtering action types

import { filter } from 'transducers.js';
import transduce from 'redux-transducers';

const addTodoReducer = transduce(
  filter(action => action.type === 'ADD_TODO'),
  (state, action) => ({ ...state, todos: [...state.todos, action.payload })
);

const removeTodoReducer = transduce(
  filter(action => action.type === 'REMOVE_TODO'),
  (state, action) => ({ ...state, todos: state.todos.filter(t => t.id !== action.payload.id) })
);

// Combine into a single reducer with reduce-reducers
// https://github.com/acdlite/reduce-reducers
import reduceReducers from 'reduce-reducers';
const todoReducer = reduceReducers(addTodoReducer, removeTodoReducer);
You might also like...
Thunk middleware for Redux

Redux Thunk Thunk middleware for Redux. npm install redux-thunk yarn add redux-thunk Note on 2.x Update Most tutorials today assume that you're using

Logger for Redux
Logger for Redux

Logger for Redux Now maintained by LogRocket! LogRocket is a production Redux logging tool that lets you replay problems as if they happened in your o

Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

An alternative side effect model for Redux apps
An alternative side effect model for Redux apps

redux-saga redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like acce

Declarative Side Effects for Redux
Declarative Side Effects for Redux

Redux Data FX Declarative Side Effects for Redux. It helps you keep your business logic and effectful code separate. The idea is simple: in addition o

RxJS middleware for action side effects in Redux using
RxJS middleware for action side effects in Redux using "Epics"

RxJS-based middleware for Redux. Compose and cancel async actions to create side effects and more. https://redux-observable.js.org Install This has pe

Analytics middleware for Redux

redux-analytics Analytics middleware for Redux. $ npm install --save redux-analytics Want to customise your metadata further? Check out redux-tap. Usa

:recycle: higher order reducer to add undo/redo functionality to redux state containers
:recycle: higher order reducer to add undo/redo functionality to redux state containers

redux undo/redo simple undo/redo functionality for redux state containers Protip: Check out the todos-with-undo example or the redux-undo-boilerplate

Redux bindings for client-side search
Redux bindings for client-side search

redux-search Higher-order Redux library for searching collections of objects. Search algorithms powered by js-worker-search. Check out the live demo a

Comments
  • Rx has support for transducers already

    Rx has support for transducers already

    Hello @acdlite,

    You have interesting repo https://github.com/acdlite/redux-rx. But Rx has support for transducers http://xgrommx.github.io/rx-book/content/getting_started_with_rxjs/creating_and_querying_observable_sequences/transducers.html.

    opened by xgrommx 1
Owner
Andrew Clark
React core at Facebook. Hi!
Andrew Clark
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Jan 3, 2023
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Dec 30, 2022
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

Redux 293 Nov 13, 2022
A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. ?? Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

João Marcos Belanga 1 May 24, 2022
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

Márcio Júnior 2 Jul 21, 2022
A lightweight state management library for react inspired by redux and react-redux

A lightweight state management library for react inspired by redux and react-redux

null 2 Sep 9, 2022
Official React bindings for Redux

React Redux Official React bindings for Redux. Performant and flexible. Installation Using Create React App The recommended way to start new apps with

Redux 22.5k Jan 1, 2023
DevTools for Redux with hot reloading, action replay, and customizable UI

Redux DevTools Developer Tools to power-up Redux development workflow or any other architecture which handles the state change (see integrations). It

Redux 13.3k Jan 2, 2023
Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux <-> Router syncing needs with React Router 4+, please see one of these librari

React Community 7.9k Dec 30, 2022
The official, opinionated, batteries-included toolset for efficient Redux development

Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development (Formerly known as "Redux Starter Kit") Installati

Redux 8.9k Dec 31, 2022