return promise from store after redux thunk dispatch

by

Here you have an example on how to dispatch and chain async action. https://github.com/gaearon/redux-thunk

The thunk middleware knows how to turn thunk async actions into actions, so you just have to have your simple_action() to be a thunk and the thunk middleware will do the job for you, if the middleware see a normal action, he will dispatch this action as normal action but if it’s an async function it will turn your async action into normal action.

So your simple_action need to be a thunk ( A thunk is a function that returns a function.) Like this for example: 

function makeASandwichWithSecretSauce(forPerson) {
  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error))
    );
  };
}

When using the makeASandwichWithSecretSauce function you can use the dispatch function 

store.dispatch(
  makeASandwichWithSecretSauce('Me')
);

And even 

// It even takes care to return the thunk’s return value
// from the dispatch, so I can chain Promises as long as I return them.

store.dispatch(
  makeASandwichWithSecretSauce('My wife')
).then(() => {
  console.log('Done!');
});

Here a complete example on how you can write action creators that dispatch actions and async actions from other action creators, and build your control flow with Promises.

function makeSandwichesForEverybody() {
  return function (dispatch, getState) {
    if (!getState().sandwiches.isShopOpen) {
      // You don’t have to return Promises, but it’s a handy convention
      // so the caller can always call .then() on async dispatch result.
      return Promise.resolve();
    }

    //Do this action before starting the next one below 
    dispatch(simple_action());

    // We can dispatch both plain object actions and other thunks,
    // which lets us compose the asynchronous actions in a single flow.
    return dispatch(
      makeASandwichWithSecretSauce('My Grandma')
    ).then(() =>
      Promise.all([
        dispatch(makeASandwichWithSecretSauce('Me')),
        dispatch(makeASandwichWithSecretSauce('My wife'))
      ])
    ).then(() =>
      dispatch(makeASandwichWithSecretSauce('Our kids'))
    ).then(() =>
      dispatch(getState().myMoney > 42 ?
        withdrawMoney(42) :
        apologize('Me', 'The Sandwich Shop')
      )
    );
  };
}
//apologize and withdrawMoney are simple action like this for example
      return {
        type:  "END_SUCESS"
      }

//usage 

store.dispatch(
  makeSandwichesForEverybody()
).then(() =>
    console.log("Done !");
);

To create you own promises you can use a library like bluebird.

//EDIT :
To be sure that the store has processed that action completely before anything else happens in the function action_creator() you can dispatch this simple_action before action_creator(); // I added this comment to the code //Do this action before starting the next one below

More Related Contents:

  1. Why do we need middleware for async flow in Redux?
  2. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await
  3. How to reset the state of a Redux store?
  4. When to use ES6 class based React components vs. functional ES6 React components?
  5. Accessing Redux state in an action creator?
  6. Where to write to localStorage in a Redux app?
  7. Fetch: reject promise and catch the error if status is not OK?
  8. Why is my onClick being called on render? – React.js
  9. Await is a reserved word error inside async function
  10. How to dynamically load reducers for code splitting in a Redux application?
  11. Is this the correct way to delete an item using redux?
  12. React: how to load and render external html file?
  13. Is store.dispatch in Redux synchronous or asynchronous
  14. Updating nested data in redux store
  15. Cleaner/shorter way to update nested state in Redux?
  16. Getting an error “A non-serializable value was detected in the state” when using redux toolkit – but NOT with normal redux
  17. redux fetch body is not use with no cors mode
  18. What’s the ‘@’ (at symbol) in the Redux @connect decorator?
  19. How to sync Redux state and url hash tag params
  20. TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined raised when starting react app
  21. Changing the layout of a component depending on Redux state
  22. Firestore update all documents in collections
  23. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  24. Programmatically change Redux-Form Field value
  25. having multiple instance of same reusable redux react components on the same page/route
  26. Update single value in item array | react redux
  27. Component won’t update when a redux state change occurs
  28. React-Redux: Should all component states be kept in Redux Store
  29. FlatList renderItem is called multiple times
  30. How to get simple dispatch from this.props using connect w/ Redux?

Leave a Comment