Javascript 在 redux 中在哪里调度多个操作？

Where to dispatch multiple actions in redux?

提问by Radex

I am using redux with connectand redux-thunkmiddleware and containers.

我使用与终极版connect和redux-thunk中间件和容器。

Currently when an user perform an action, example one click on a button, I need to dispatch that action (sync) which will dispatch other few actions (asynch).

目前，当用户执行一个操作时，例如单击一个按钮，我需要调度该操作（同步），它将调度其他几个操作（异步）。

I am aware dispatching actions from within the reducer is an anti pattern.

我知道从减速器内部调度动作是一种反模式。

I would like to know what is a suitable place for this code.

我想知道这段代码的合适位置是什么。

Currently I am not sure if it should stay in:

目前我不确定它是否应该留在：

• The action creator.
• In the container using store.subscribe.

• 动作创造者。
• 在容器中使用 store.subscribe。

回答by Mμ.

The recommended way as per the documentationis in the action creator, like so:

根据文档推荐的方法是在动作创建者中，如下所示：

function actionCreator(payload) {
    return dispatch => {
        dispatch(action1(payload))
        dispatch(action2(payload))
    }
}

Then you would probably want to attach the action creators as prop and pass it down to the container using mapDispatchToPropslike in the example mentioned here. So it would look something like so:

然后，您可能希望将动作创建者附加为道具，并使用此处mapDispatchToProps提到的示例中的方法将其传递给容器。所以它看起来像这样：

const mapDispatchToProps = dispatch => ({
   action1: some_payload => dispatch(action1(some_payload))
   action2: some_payload => dispatch(action2(some_payload))
})

// your component
export default connect(mapStateToProps, mapDispatchToProps)(YourApp)

---

---

回答by GibboK

As other pointed out The action creatoris the right place for dispatching multiple actions.

正如其他人指出的那样，The action creator是调度多个动作的正确位置。

Below an example of how action1could dispatch other actions in your action creator.

下面是一个示例，说明如何action1在您的action creator.

const action1 = id => {
  return dispatch => {
    dispatch(action2(id))
    dispatch(action3(id))
  }
}

回答by Shiraz

The action creator is the correct location for dispatching multiple actions. Although code like the following would work:

动作创建者是分派多个动作的正确位置。虽然像下面这样的代码可以工作：

function actionCreator(payload) {
    return dispatch => {
        dispatch(action1(payload))
        dispatch(action2(payload))
    }
}

I would highly recommend redux-thunkbased action creators to always return a resolved Promise, so that such action creators can be part of another async call. So, the simplest update to the above would be:

我强烈建议redux-thunk基于动作的创建者总是返回一个已解决的 Promise，这样这样的动作创建者就可以成为另一个异步调用的一部分。因此，对上述内容的最简单更新是：

function actionCreator(payload) {
    return dispatch => {
        dispatch(action1(payload));
        dispatch(action2(payload));
        return Promise.resolve();
    }
}

It would then be possible to dispatch to the above with: actionCreator(payload).then(doAnotherAction(anotherPayload))or the following, if we need to maintain order of calls: actionCreator(payload).then(() => doAnotherAction(anotherPayload))

actionCreator(payload).then(doAnotherAction(anotherPayload))如果我们需要保持调用顺序，则可以使用：或以下内容调度到上述 内容： actionCreator(payload).then(() => doAnotherAction(anotherPayload))

If you wish to 'future-proof' your action creator, so that it could handle calling both async and sync action creators, you could write it as:

如果您希望“面向未来”您的动作创建者，以便它可以处理调用异步和同步动作创建者，您可以将其编写为：

function actionCreator(payload) {
    return dispatch =>
        Promise.resolve(dispatch(action1(payload))).then(
        () => dispatch(action2(payload)));
}

And, if you like ES6 arrow notation the above can be defined as:

而且，如果你喜欢 ES6 箭头符号，上面可以定义为：

const actionCreator = payload => dispatch =>
        Promise.resolve(dispatch(action1(payload))).then(
        () => dispatch(action2(payload)));

回答by Bugs Bunny

While solution by @GibboK did not work for me:

虽然@GibboK 的解决方案对我不起作用：

const mapDispatchToProps = (dispatch) => ({
  action2: id => dispatch(Actions.action2(id)),
  action3: id => dispatch(Actions.action3(id)),
  action1: (dateId, attrId) => {
    return dispatch => {
      dispatch(Actions.action2(dateId));
      dispatch(Actions.action3(attrId));
    }
  }
});

I eventually went with redux-batched-actions. Worked like charm:

我最终选择了redux-batched-actions。像魅力一样工作：

const mapDispatchToProps = (dispatch) => ({
  action2: id => dispatch(Actions.action2(id)),
  action3: id => dispatch(Actions.action3(id)),
  action1: (dateId, attrId) =>
    dispatch(batchActions([
      Actions.action2(dateId),
      Actions.action3(attrId)
    ]))
});

回答by RubbelDieKatz

If you have a Promise Middleware, you can use this syntax so you're able to use .then()on your dispatch(topLevelAction()):

如果你有一个Promise Middleware，你可以使用这个语法，这样你就可以.then()在你的dispatch(topLevelAction())：

export const topLevelAction = () => dispatch => {
    return Promise.all([dispatch(action1()), dispatch(action2()), dispatch(action3())])
}

回答by Gherciu Gheorghe

The easiest way is to use a specialized middleware redux-soldier:

最简单的方法是使用专门的中间件redux-soldier：

import { createStore, applyMiddleware } from 'redux'
import { reduxSoldierMiddleware } from 'redux-soldier'

const store = createStore(rootReducer, applyMiddleware(reduxSoldierMiddleware))
store.dispatch([
  {type: 'INCREMENT'}, // traditional action
  addTodo('Start using redux-soldier'), // action creator
  fetchUser(), // thunk action
])

redux-soldieris also a full replacement for redux-thunk

redux-soldier也是一个完整的替代品 redux-thunk

For more info check the documentation redux-soldier.

有关更多信息，请查看文档redux-soldier。