Effectful

The easy way to handle side effects in Redux

yarn add effectful

Usage

Define your side effects as async or regular functions and specify which actions you want them to be triggered by.

// effects/index.js

const fetchTodos = async (state, action, dispatch) => {
  const { searchQuery } = state;
  const url = `https://my-api.com/todos?query=${searchQuery}`;

  try {
    const response = await fetch(url);
    const { todos} = await response.json();

    dispatch(fetchTodosSuccess(todos));
  } catch (error) {
    dispatch(fetchTodosFail(error));
  }
};

export default {
  APP_MOUNTED: fetchTodos,
  SEARCH_QUERY_CHANGED: fetchTodos
};

Then all you have to do is add the effectful middleware to your store.

// store/index.js

import { createStore, applyMiddleware } from 'redux';
import applyEffects from 'effectful';
import todos from '../reducers';
import effects from '../effects';

const store = createStore(
  todos,
  applyMiddleware(applyEffects(effects));
);

If you want to run multiple effects when an action is dispatched you can pass an array of effects.

export default {
  APP_MOUNTED: [fetchTodos, logger],
  SEARCH_QUERY_CHANGED: fetchTodos
};