redux-transducers

by acdlite

Transducer utilities for Redux.

128 Stars 6 Forks Last release: Not found 16 Commits 3 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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);

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.