【问题标题】:Redux action creators invoke one inside anotherRedux 动作创建者在另一个内部调用
【发布时间】:2016-03-11 06:10:10
【问题描述】:

我在 Redux 中使用 ducks,但这应该与问题无关。我在同一个文件中有几个动作创建者,我想从另一个中调用一个(希望不必为下面 SWITCH 中的每个 CASE 双重调度):

...
export function closeAuthDialogs() {
  return {type: CLOSE_AUTH_DIALOGS}
}

export function openDialog(dialog) {
  // close any open dialogs
  dispatch => {dispatch(closeAuthDialogs())} // <--THIS DOES NOT GET CALLED!!!
  //open the one we need
  switch (dialog) {
    case 'login':
      return {type: OPEN_LOGIN}
    case 'register':
      return {type: OPEN_REGISTER}
    case 'forgot':
      return {type: OPEN_FORGOT}
    case 'change':
      return {type: OPEN_CHANGE}
    case 'profile':
      return {type: OPEN_PROFILE}
    default:
      return;
  }
}
...

打开工作正常,但关闭功能永远不会被触发。有没有办法从 open 函数中调用 close 函数,而不需要对 open 函数的 SWITCH 中的每个 CASE 进行双重调度?

通过双重调度,我的意思是......

return dispatch => {
  dispatch({type: CLOSE_AUTH_DIALOGS})
  dispatch({type: OPEN_SOME_DIALOG)}
}

如果可能,我想只调用一次关闭,然后返回指定的打开。

TIA!

【问题讨论】:

    标签: javascript redux react-redux


    【解决方案1】:

    您需要使用像redux-thunk 这样的中间件。安装说明here 但基本上你需要在设置商店时应用它:

    const store = createStore(
      rootReducer,
      applyMiddleware(thunk)
    );
    

    这将允许你从一个动作中返回一个函数。应该这样做:

    export function openDialog(dialog) {
      return (dispatch) => {
        dispatch(closeAuthDialogs());
        switch (dialog) {
          case 'login':
            return dispatch({type: OPEN_LOGIN})
          case 'register':
            return dispatch({type: OPEN_REGISTER})
          case 'forgot':
            return dispatch({type: OPEN_FORGOT})
          case 'change':
            return dispatch({type: OPEN_CHANGE})
          case 'profile':
            return dispatch({type: OPEN_PROFILE})
          default:
            return;
        }
      }
    }
    

    【讨论】:

    • 谢谢!我有think中间件。只是错过了关闭调度的回报并将它们全部包装在其中。
    • 是的,如果您使用 thunk,则内部函数的返回值无效 — 您必须明确地将 dispatch 用作参数。
    猜你喜欢
    • 1970-01-01
    • 2020-11-21
    • 2018-06-12
    • 1970-01-01
    • 2018-11-23
    • 2017-08-02
    • 1970-01-01
    • 2020-02-19
    • 1970-01-01
    相关资源
    最近更新 更多