Skip to content
The easy way to handle side effects in Redux
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.eslintrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

Effectful

The easy way to handle side effects in Redux

build status npm version

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
};
You can’t perform that action at this time.