Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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
};

About

The easy way to handle side effects in Redux

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published