Redux登录流程疑问：动作调用规范及isLoading状态设置

1. 关于直接调用requestSignInSuccess/requestSignInFailure的规范问题 #

Hey there! 首先要明确：你当前的写法不符合Redux规范，而且根本不会生效。原因很简单——Redux的action只有通过dispatch方法发送到store，才能触发reducer更新状态。你现在只是在异步回调里调用了返回action对象的函数，但没有把这些对象dispatch出去，所以状态完全不会有任何变化。

要处理异步action，你需要用到Redux中间件，最常用的就是redux-thunk。它允许你编写返回函数的action creator，这个函数可以接收dispatch作为参数，从而在合适的时机dispatch真正的action。

修改你的requestSignIn函数如下：

export function requestSignIn(email, password) { // 建议把邮箱密码作为参数传入，不要硬编码死值
  return (dispatch) => {
    // 这里先dispatch请求发起的action，后面会讲isLoading的处理
    dispatch({ type: REQUEST_SIGN_IN });

    firebase.auth().signInWithEmailAndPassword(email, password)
      .then(response => {
        // 成功时dispatch成功action
        dispatch(requestSignInSuccess(response.user));
      })
      .catch(error => {
        // 失败时dispatch失败action
        dispatch(requestSignInFailure(error));
      });
  };
}

注意：一定要确保你已经在Redux store中配置了redux-thunk中间件，否则这个返回函数的action creator不会被正确处理哦。

2. isLoading标志的修改时机 #

isLoading用来标记登录请求的加载状态，需要在三个关键阶段更新：

• 请求发起时：设置isLoading: true，告诉UI显示加载动画、禁用登录按钮等
• 请求成功/失败时：设置isLoading: false，结束加载状态，恢复UI交互

对应的处理方式：

• 你已经定义了REQUEST_SIGN_IN这个action类型，正好可以用来标记请求开始。在reducer中，当收到REQUEST_SIGN_IN类型的action时，把isLoading设为true。
• 当收到REQUEST_SIGN_IN_SUCCESS或REQUEST_SIGN_IN_FAILURE时，把isLoading设为false，同时处理用户信息或错误信息。

示例reducer代码：

const initialState = {
  user: null,
  error: null,
  isLoading: false
};

export default function authReducer(state = initialState, action) {
  switch (action.type) {
    case REQUEST_SIGN_IN:
      return {
        ...state,
        isLoading: true,
        error: null // 清空之前的错误信息
      };
    case REQUEST_SIGN_IN_SUCCESS:
      return {
        ...state,
        isLoading: false,
        user: action.payload,
        error: null
      };
    case REQUEST_SIGN_IN_FAILURE:
      return {
        ...state,
        isLoading: false,
        error: action.payload.message // 提取友好的错误提示
      };
    default:
      return state;
  }
}

这样整个登录流程的状态就完整了：点击登录按钮→dispatchrequestSignIn→reducer设置isLoading: true→请求完成→dispatch成功/失败action→reducer设置isLoading: false并更新用户/错误信息。

额外的小优化建议 #

• 不要在action creator里硬编码EMAIL和PASSWORD，应该从组件的输入框中获取后作为参数传入requestSignIn，这样代码更通用灵活。
• 如果requestSignInSuccess和requestSignInFailure后续需要在其他地方复用，可以把它们改为export的函数；如果只在requestSignIn里用，保持私有也完全没问题。

内容的提问来源于stack exchange，提问作者Satoru Kikuchi