Can I dispatch an action in reducer?

by

Starting another dispatch before your reducer is finished is an anti-pattern, because the state you received at the beginning of your reducer will not be the current application state anymore when your reducer finishes. But scheduling another dispatch from within a reducer is NOT an anti-pattern. In fact, that is what the Elm language does, and as you know Redux is an attempt to bring the Elm architecture to JavaScript.

Here is a middleware that will add the property asyncDispatch to all of your actions. When your reducer has finished and returned the new application state, asyncDispatch will trigger store.dispatch with whatever action you give to it.

// This middleware will just add the property "async dispatch" to all actions
const asyncDispatchMiddleware = store => next => action => {
  let syncActivityFinished = false;
  let actionQueue = [];

  function flushQueue() {
    actionQueue.forEach(a => store.dispatch(a)); // flush queue
    actionQueue = [];
  }

  function asyncDispatch(asyncAction) {
    actionQueue = actionQueue.concat([asyncAction]);

    if (syncActivityFinished) {
      flushQueue();
    }
  }

  const actionWithAsyncDispatch =
    Object.assign({}, action, { asyncDispatch });

  const res = next(actionWithAsyncDispatch);

  syncActivityFinished = true;
  flushQueue();

  return res;
};

Now your reducer can do this:

function reducer(state, action) {
  switch (action.type) {
    case "fetch-start":
      fetch('wwww.example.com')
        .then(r => r.json())
        .then(r => action.asyncDispatch({ type: "fetch-response", value: r }))
      return state;

    case "fetch-response":
      return Object.assign({}, state, { whatever: action.value });;
  }
}

More Related Contents:

  1. React setState not Updating Immediately
  2. What is mapDispatchToProps?
  3. What is the best way to access redux store outside a react component?
  4. why do you need to bind a function in a constructor
  5. What is use of curly braces in an ES6 import statement?
  6. How can I persist redux state tree on refresh?
  7. Attach Authorization header for all axios requests
  8. What is the best way to redirect a page using React Router? [closed]
  9. Handling async request with React, Redux and Axios?
  10. React – Display loading screen while DOM is rendering?
  11. When do I choose React state Vs Redux Store
  12. Use Connect or pass data as props to children
  13. Axios get in url works but with second parameter as object it doesn’t
  14. Redux: Why is avoiding mutations such a fundamental part of using it?
  15. ReactJS lifecycle method inside a function Component
  16. Element type is invalid: expected a string (for built-in components) or a class/function
  17. Use history.push in action creator with react-router-v4?
  18. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  19. How does connect work without mapDispatchToProps
  20. Trace why a React component is re-rendering
  21. React: Parent component re-renders all children, even those that haven’t changed on state change
  22. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  23. Jest setup “SyntaxError: Unexpected token export”
  24. How to fix 431 Request Header Fields Too Large in React-Redux app
  25. Update single value in item array | react redux
  26. how to set initial state in redux
  27. My Redux state has changed, why doesn’t React trigger a re-render?
  28. How do I see state when logging to the console instead of Proxy object inside reducer action?
  29. Typescript + React/Redux: Property “XXX” does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes
  30. When exactly is `componentDidMount` fired?

Leave a Comment