redux-call-effect

A declarative way to call action creators.

npm install --save redux-call-effect

1import { call } from 'redux-call-effect';
2
3// Before:
4dispatch(doAction(param1, param2));
5// After:
6dispatch(call(doAction, param1, param2));

Why?

To simplify testing.

In some cases calling action creators imperatively makes testing virtually impossibe, especially when using thunks. Consider this example:

1// Source:
2const onResultSaved = result => dispatch => {
3  /* ... */
4};
5
6const saveResult = result => dispatch => {
7  /* ... */
8  dispatch(onResultSaved(result));
9};
10
11// Test:
12test('saveResult() dispatches postResult', () => {
13  saveResult(result)(dispatch);
14  // Cannot do that, onResultSaved() returns a new function every time!
15  expect(dispatch).toHaveBeenCalledWith(onResultSaved(result)); // Error!
16});

We cannot easily check if a correct thunk was dispatched. redux-call-effect to the rescue:

1// Source:
2const onResultSaved = result => dispatch => {
3  /* ... */
4};
5
6const saveResult = result => dispatch => {
7  /* ... */
8  dispatch(call(onResultSaved, result));
9};
10
11// Test:
12test('saveResult() dispatches postResult', () => {
13  saveResult(result)(dispatch);
14  expect(dispatch).toHaveBeenCalledWith(call(onResultSaved, result)); // Works!
15});

Installation

npm install --save redux-call-effect

Before you can use call you have to inject the middleware with applyMiddleware:

1import { createStore, applyMiddleware } from 'redux';
2import { callEffectMiddleware } from 'redux-call-effect';
3import reducer from './reducer';
4
5const store = createStore(reducer, applyMiddleware(callEffectMiddleware));

Inspiration

This project is of course inspired by the call effect from the awesome redux-saga.

License

MIT