javascript - 尝试了解 Redux 操作创建者

Question

export const loginUser = userData => dispatch => {
  dispatch(showLoading(true));
}

这很好用

虽然这会引发错误

export const loginUser = userData => {
    dispatch(showLoading(true));  // dispatch undefined
}

如果我理解正确，第一个代码片段相当于

function loginUser(userData) {
   // dispatch is available here since its taken as a param for this inner function
    return function(dispatch){ 
        dispatch(showLoading(true));
    }
}

这意味着可以在此处的 loginUser 函数中进行调度。 那么为什么第二个代码片段中不可用。

Answer 1

箭头函数相当于

export const loginUser = userData => dispatch => {
  dispatch(showLoading(true));
}

是

export function loginUser(userData) {
   return function(dispatch) {
      dispatch(showLoading(true));
   }
}

当您执行 loginUser 函数时，其执行方式如下

loginUser(userData)(dispatch);

因此 dispatch 是被调用的内部函数的参数，并且不能作为外部函数内部的值使用。

因此在您的示例中

export const loginUser = userData => {
    dispatch(showLoading(true));  // dispatch undefined
}

调度未定义