In React Redux How to execute two or more actions

Question

In React-redux project, sometimes we need to execute two actions.

For example,

// I have to both 
handleAddItem(){
  this.props.actions.addItem(); // working
  this.props.actions.updateItemList(); // not working
}

Above code is not working. It just seems to be executed first action addItem(). updateItemList() is not working.

But I found hack to execute both actions,

handleAddItem(){
  this.props.actions.addItem(); // working
  setTimeout(()=>{
    this.props.actions.updateItemList(); // It's working
  }, 1000);
}

Is there accurate code to execute 2 more actions?

Does updateItemList() rely on addItem()? If it does, you need to make it a callback to addItem or have addItem return a promise. — jmargolisvt, Feb 03 '17 at 02:42
Is there any particular reason for using two actions at a time? It's generally better to update your state with a single action. — David L. Walsh, Feb 03 '17 at 02:56
@DavidL.Walsh It just sample functions. In my case, execute addItem() and updateItemList() is to change list order. — Junho Park, Feb 03 '17 at 03:07
You may also want to consider http://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559 - tldr you can define an action that returns a function to dispatch multiple functions. — Max Sindwani, Feb 03 '17 at 03:13

score 1 · Answer 1 · edited May 23 '17 at 11:45

1

To add to my comment earlier, How to dispatch a Redux action with a timeout? explains a widely used solution to your problem. As for differentiating between sync and async actions, simply return either an object (synchronous support) or a function (asynchronous support).

edited May 23 '17 at 11:45

Community

1
1

answered Feb 03 '17 at 13:00

Max Sindwani

1,267
7
15

In React Redux How to execute two or more actions

1 Answers1