mapStateToProps未执行：多容器校验Firebase UI Auth及认证后跳转问题

我碰到过好多次类似的情况——Redux里action和reducer明明更新了状态，但组件就是没反应，大概率是这几个环节出了问题，咱们一步步排查：

1. 检查Reducer是否遵循不可变更新原则 #

Redux依赖状态的引用变化来判断是否需要通知组件更新，如果直接修改原state对象，Redux会认为状态没变化，组件自然不会重新渲染。

❌ 错误写法（直接修改原state）：

case 'AUTH_SUCCESS':
  state.isAuthenticated = true;
  state.user = action.payload;
  return state;

✅ 正确写法（返回新的状态对象）：

case 'AUTH_SUCCESS':
  return {
    ...state, // 展开原状态，保留其他未修改的属性
    isAuthenticated: true,
    user: action.payload
  };

2. 确认mapStateToProps的状态路径是否正确 #

检查你在Login组件里的mapStateToProps是否准确指向了store中的auth状态。比如你的store结构是{ auth: { isAuthenticated, user } }，那映射应该是：

const mapStateToProps = (state) => ({
  isAuthenticated: state.auth.isAuthenticated,
  user: state.auth.user
});

如果路径写错（比如写成state.isAuthenticated），组件拿到的始终是旧值或者undefined，自然不会响应状态变化。

3. 验证Firebase Auth状态监听是否正确触发Action #

确保你已经正确设置了Firebase Auth的状态监听，并且在状态变化时dispatch了对应的action：

import firebase from 'firebase/app';
import 'firebase/auth';

// 在组件或者redux middleware中设置监听
firebase.auth().onAuthStateChanged(user => {
  if (user) {
    // 确保这里的action被正确dispatch到reducer
    dispatch({ type: 'AUTH_SUCCESS', payload: user });
  } else {
    dispatch({ type: 'AUTH_LOGOUT' });
  }
});

如果这个监听没生效，或者action的type和reducer里的case不匹配，reducer也不会更新状态。

4. 检查组件是否正确连接Redux #

确认Login组件已经用connect（或者Redux Hooks）正确连接到Redux store：

类组件写法： #

import { connect } from 'react-redux';

// ...组件代码

export default connect(mapStateToProps, mapDispatchToProps)(Login);

⚠️ 注意：不要直接导出原始的Login组件，必须导出经过connect包裹后的组件。

函数组件Hooks写法： #

import { useSelector, useDispatch } from 'react-redux';

const Login = () => {
  // 正确获取状态
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
  const dispatch = useDispatch();

  // ...其他逻辑
};

5. 确认组件内的跳转逻辑是否正确触发 #

即使状态更新了，如果组件内没有监听状态变化并执行跳转，也不会自动跳转到主页面。

函数组件用useEffect监听： #

import { useHistory } from 'react-router-dom';

const Login = () => {
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
  const history = useHistory();

  useEffect(() => {
    // 当isAuthenticated变为true时跳转
    if (isAuthenticated) {
      history.push('/main');
    }
  }, [isAuthenticated, history]); // 必须把isAuthenticated加入依赖数组

  // ...渲染Firebase UI的代码
};

类组件用componentDidUpdate监听： #

componentDidUpdate(prevProps) {
  // 检查状态是否从false变为true
  if (this.props.isAuthenticated && !prevProps.isAuthenticated) {
    this.props.history.push('/main');
  }
}

6. 排查异步action的问题（如果使用了中间件） #

如果你用了redux-thunk或者redux-saga处理异步认证，确保异步逻辑完成后正确dispatch了更新状态的action。比如用redux-thunk的action creator：

export const signInWithFirebase = () => {
  return (dispatch) => {
    // 这里写Firebase认证的异步逻辑
    firebase.auth().signInWithPopup(provider)
      .then(result => {
        dispatch({ type: 'AUTH_SUCCESS', payload: result.user });
      })
      .catch(error => {
        dispatch({ type: 'AUTH_ERROR', payload: error });
      });
  };
};

如果异步逻辑里没有正确dispatch action，状态也不会更新。

内容的提问来源于stack exchange，提问作者Aditya Srinivas