redux-chain

redux-chain

Redux-chain allows you to dispatch multiple actions calls using a single dispatch call.

import { chain } from 'redux-chain'
dispatch(chain(
	signIn(),
	clickOnButton()
	signOut(),
));

Installation

Download

npm install --save redux-chain

Build

npm run build

Installation & Usage

Import & add the middleware to your Redux store

import { createStore, applyMiddleware } from 'redux';
import { chainMiddleware } from 'redux-chain';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(chainMiddleware)
);

To enable thunk actions (or other useful middleware), simply apply redux-chain before other middleware.

import { createStore, applyMiddleware } from 'redux';
import { chainMiddleware } from 'redux-chain';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const middleware = [chainMiddleware, thunk]; // not: [thunk, chainMiddleware]

const store = createStore(
  rootReducer,
  applyMiddleware(middleware)
);

Do more with less

I love to combine redux-chain with novux (github.com/neednova/novux), a tool that helps declare state changes simply, clearly and quickly.

import { chain } from 'redux-chain'
import { update, reset } from 'novux'

const todos = [1, 2];

dispatch(chain(
	update('todos', 'Add a todo', {
		todos: todos.push(3);
	}),
	reset('todos', 'Reset todos', {
		reset: ['todos'],
	}),
));