javascript - inner函数如何获取 'dispatch'参数？

Question

我是 React-Redux 的新手!

但是我有一个问题。

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

GetCurrentUserInfo Action 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) : 调用“调度函数”
• 乙:dispatch(getCurrentUserInfo()) : 发送一个“ Action ”

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

(B) 是在 getCurrentUserInfo() 时使用的模式将是一个“ Action 创建者”(在您的情况下不是)，即返回“ Action ”的函数，例如 { type: ..., users: ... } .