Miss any of our Open RFC calls?Watch the recordings here! »

redux-reactions

1.3.0 • Public • Published

redux-reactions

Action handler middleware for Redux.

npm version

npm install --save redux-reactions

Motivation

I felt I needed a way to wait for an action to be dispatched in Redux, and respond to it in some way other than manipulating the store.

Like redux-saga, but much lighter.

Inspiration

Lots of people have had a take on this, here are some middlewares I found that may suit you better:

Usage

First, register the middleware:

store.js

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { createReactionsMiddleware } from 'redux-reactions';
const todoApp = combineReducers(reducers);
const store = createStore(
  todoApp,
  applyMiddleware(createReactionsMiddleware())
);

Next up, just like your actions go into a seperate file; for example actions/index.js, your reactions should also be seperated:

reactions/index.js

import * as constants from "./constants";
 
export function handleNewTodo(addReaction) {
  addReaction(constants.ADD_TODO, (dispatch, getState, action) => {
    /*
       * Do something, but don't dispatch ADD_TODO again or
       * you will enter a loop.
       * 
       * You can perform asynchronous work here.
       */
  });
}

And now in your container, register your reactions:

containers/todo.js

import { connect } from 'react-redux';
import { registerReactions } from 'redux-reactions';
 
import TodoList from 'components/TodoList';
import * as reactions from './reactions';
const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({});
 
registerReactions(reactions);
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList);

Thanks

Many thanks to Ben Anderson for giving up the redux-reactions npm package name.

Keywords

Install

npm i redux-reactions

DownloadsWeekly Downloads

8

Version

1.3.0

License

MIT

Unpacked Size

9.22 kB

Total Files

8

Last publish

Collaborators

  • avatar