Neurophysiologically Pseudoscientific Manatee

    effectful

    2.0.0 • Public • Published

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

    Install

    npm i effectful

    DownloadsWeekly Downloads

    12

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    212 kB

    Total Files

    11

    Last publish

    Collaborators

    • artmann