React Redux状态变更后组件未重新渲染问题求助

嘿，刚入门React和Redux碰到这种问题真的太常见了，我帮你梳理几个高频排查方向，你可以对照自己的项目一步步检查：

• 检查Reducer是否返回新状态对象
  Redux的核心规则之一：Reducer必须是纯函数，绝对不能直接修改原state！如果你的sortBy相关Reducer是直接修改原数组（比如state.comments.sort(...)），Redux会因为检测不到状态引用变化，导致组件不更新。
  正确的姿势是返回新对象/数组，比如用扩展运算符：

  // 示例Reducer写法
  function commentsReducer(state = initialState, action) {
    switch(action.type) {
      case SORT_BY_DATE:
        // 返回新数组，不修改原state
        return {
          ...state,
          comments: [...state.comments].sort((a,b) => new Date(b.date) - new Date(a.date))
        };
      case SORT_BY_LIKES:
        return {
          ...state,
          comments: [...state.comments].sort((a,b) => b.likes - a.likes)
        };
      default:
        return state;
    }
  }
  

• 确认组件和Redux Store的连接是否正确
  你的App组件看起来是通过props获取comments和sortBy方法的，要确保已经用connect高阶组件正确连接了Store：

  // 顶部引入connect
  import { connect } from 'react-redux';
  // 引入你的action creator
  import { sortBy } from './actions';
  
  // 把Store中的comments映射到组件props
  const mapStateToProps = (state) => {
    return {
      comments: state.comments // 这里要对应你Store中comments的位置
    };
  };
  
  // 把action creator映射到props，最后导出连接后的组件
  export default connect(mapStateToProps, { sortBy })(App);
  

  如果没做这一步，组件根本拿不到Store的更新。

• 验证Action是否正确触发并被Reducer处理
  点击sortByDate或sortByLikes时，确认sortBy action有没有被正确dispatch到Store：

  1. 可以在Reducer的case分支里加console.log，看是否收到对应类型的action；
  2. 用Redux DevTools（如果配置了）查看action记录，确认action触发后Store的state是否真的变化了。
     如果Store的state已经变了，但组件没更新，那问题大概率在组件连接或者state引用上；如果Store都没变化，那要检查action创建函数和dispatch逻辑。

• 检查子组件的props传递是否正确
  你的App组件把comments传给了<Items>，如果是Items组件没更新，要确认：

  • Items组件是否直接使用了props.comments，而不是把它存在自己的state里（如果存了state，props变化时不会自动同步）；
  • Items组件有没有自定义shouldComponentUpdate方法，不小心拦截了更新。

内容的提问来源于stack exchange，提问作者Mattyx Drink -Drink-