React JS with Redux组件未重新渲染问题求助

嘿，我之前也遇到过一模一样的问题！控制台里state明明在跳变，但页面就是纹丝不动，当时可把我急坏了😅。结合我的踩坑经验，你可以从这几个方向排查：

1. 先检查Reducer是不是直接修改了原State #

Redux的reducer必须是纯函数，绝对不能直接修改传入的state对象，必须返回一个全新的状态对象。举个反例：

// 错误写法：直接修改原state，Redux检测不到变化
function counterReducer(state = { count: 0 }, action) {
  switch(action.type) {
    case 'INCREMENT':
      state.count++;
      return state;
    default:
      return state;
  }
}

正确的做法是用对象展开运算符（或者Object.assign）创建新对象：

// 正确写法：返回新的state对象
function counterReducer(state = { count: 0 }, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

Redux是通过浅比较判断状态是否变化的，如果原对象引用没变，它会认为状态没更新，自然不会触发组件重新渲染。

2. 确认组件有没有正确和Redux Store连接 #

你需要用connect高阶函数把组件和Store绑定，并且正确映射state到组件的props里：

import { connect } from 'react-redux';

// 函数组件示例
function Counter(props) {
  return (
    <div>
      {/* 这里要使用映射过来的props.count，而不是直接访问store */}
      <p>Count: {props.count}</p>
      <button onClick={props.increment}>+</button>
      <button onClick={props.decrement}>-</button>
    </div>
  );
}

// 把Redux的state映射到组件props
const mapStateToProps = (state) => {
  // 这里要对应你的Store结构，如果state是嵌套的要调整路径
  return { count: state.count };
};

// 把action creators映射到props
const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' })
  };
};

// 一定要导出连接后的组件！
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

如果跳过这一步，组件根本感知不到Store的变化，就算state更新了也不会重新渲染。

3. 检查根组件有没有用Provider包裹 #

必须用Provider组件把整个应用包裹起来，让所有子组件都能访问到Store：

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducers';
import Counter from './Counter';

const store = createStore(counterReducer);

function App() {
  return (
    {/* 这里必须传入创建好的store */}
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

没有Provider的话，connect出来的组件根本拿不到Store，自然无法响应状态变化。

4. 最后确认组件里是不是用错了数据来源 #

有时候可能不小心用了组件的本地state，而不是Redux映射过来的props。比如函数组件里写成了自己定义的count变量，或者类组件里用了this.state.count而不是this.props.count。

先从这几点排查，大部分情况都能解决问题。如果还是不行，可以把你的reducer、组件和Store配置的代码贴出来，我再帮你仔细看看~

内容的提问来源于stack exchange，提问作者Jonathan Small