内部函数如何获取'dispatch'参数？

Question

我是 React-Redux 的新手！

但我有一个问题。

内部函数（async dispatch）如何接收dispatch()参数？

GetCurrentUserInfoAction Creator 函数：

export const getCurrentUserInfo = () => async dispatch => {
  const response = await axios.get('/api/users/me')

  dispatch({
    type: userActions.SET_CURRENT_USER_INFO,
    users: response.data.data
  })

  return response.data.data
}

getCurrentUserInfo 的调用方式：

export const AuthGuard = connect(
  state => ({
    currentUserSlug: state.session.currentUser
  }),
  dispatch => ({
    authOrRedirect: () => {
      return dispatch(getCurrentUserInfo()).catch(() => {
        history.replace('/login')
      })
    }
  })
)(AuthGuardComponent)

getCurrentUserInfo()没有收到任何参数，是不是因为被dispatch(getCurrentUserInfo())包围了？

Answer 1

getCurrentUserInfo() 返回一个需要一个参数dispatch 的函数。您需要调用该返回函数并将dispatch 参数传递给它：

export const AuthGuard = connect(
  state => ({}),
  dispatch => ({
    authOrRedirect: () => {
      return getCurrentUserInfo()(dispatch).catch(() => {
        history.replace('/login')
      })
    }
  })
)(AuthGuardComponent)

例如：

显然你可以这样写getCurrentUserInfo()：

const getCurrentUserInfo = function(){  // create getCurrentUserInfo dispatcher
  return async function(dispatch){
    // ...
  };
}

dispatchProp 可以这样写：

export const AuthGuard = connect(
  state => ({}),
  dispatch => ({
    authOrRedirect: () => {
      const getUserInfoDispatcher = getCurrentUserInfo();  // create dispatcher
      getUserInfoDispatcher(dispatch).catch(() => {        // call dispatcher
        history.replace('/login')
      })
    }
  })
)(AuthGuardComponent)

常见模式

显然您对这两种模式感到困惑，您可能在某处看到过：

• 答：getCurrentUserInfo()(dispatch)：调用“调度函数”
• B：dispatch(getCurrentUserInfo())：调度一个“动作”

(A) 适用于您的情况，因为getCurrentUserInfo() 返回一个“调度函数”（不是官方术语），即调用dispatch( someAction ) 的函数.
getCurrentUserInfo()(dispatch) 调用这个“调度函数”。

(B) 是一个模式，如果getCurrentUserInfo() 是一个“动作创建者”（在你的情况下不是），即返回一个“动作”的函数"，比如{ type: ..., users: ... }。