使用Redux修改Props后页面无法重新渲染的问题咨询

首先，从你给出的代码片段来看，最可能的问题出在reducer没有正确返回新的state对象——Redux要求reducer必须是纯函数，不能直接修改原state，而是要返回一个全新的对象，这样React才能检测到state变化并触发组件重新渲染。

咱们一步步排查和修复：

1. 补全正确的Reducer实现 #

你的reducer代码只写了init...，应该完整实现处理SET_NOTIFICATION动作的逻辑，并且严格返回新对象：

import { SET_NOTIFICATION } from "./action-types";

// 初始化state
const initialState = { notyIndex: 0 };

const notificationReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_NOTIFICATION:
      // 关键：返回新的state对象，而不是修改原state
      return {
        ...state, // 解构原state的其他属性（如果后续扩展的话）
        notyIndex: action.notyIndex // 更新目标属性
      };
    default:
      return state; // 默认情况返回原state，避免破坏状态
  }
};

export default notificationReducer;

2. 确认组件正确连接Redux #

确保你的组件通过connect（类组件）或者useSelector/useDispatch（函数组件）正确订阅state变化，并且映射的props能获取到最新的state：

类组件示例（使用connect）： #

import { connect } from 'react-redux';
import { setNotyIndex } from './action';

class NotificationComponent extends React.Component {
  handleUpdateIndex = () => {
    // 触发action修改state
    this.props.setNotyIndex(this.props.notyIndex + 1);
  };

  render() {
    return (
      <div>
        <p>当前通知索引：{this.props.notyIndex}</p>
        <button onClick={this.handleUpdateIndex}>更新索引</button>
      </div>
    );
  }
}

// 把Redux state映射到组件props
const mapStateToProps = (state) => ({
  notyIndex: state.notyIndex // 这里要对应reducer管理的state结构
});

// 把action映射到组件props
const mapDispatchToProps = {
  setNotyIndex
};

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

函数组件示例（使用Redux Hooks）： #

import { useSelector, useDispatch } from 'react-redux';
import { setNotyIndex } from './action';

const NotificationComponent = () => {
  const notyIndex = useSelector(state => state.notyIndex);
  const dispatch = useDispatch();

  const handleUpdateIndex = () => {
    dispatch(setNotyIndex(notyIndex + 1));
  };

  return (
    <div>
      <p>当前通知索引：{notyIndex}</p>
      <button onClick={handleUpdateIndex}>更新索引</button>
    </div>
  );
};

export default NotificationComponent;

3. 检查Store的配置 #

确保你正确创建了Redux Store并传入了reducer，同时在根组件用Provider包裹：

// store.js
import { createStore } from 'redux';
import notificationReducer from './reducer';

const store = createStore(notificationReducer);

export default store;

根组件配置：

import { Provider } from 'react-redux';
import store from './store';
import NotificationComponent from './NotificationComponent';

function App() {
  return (
    <Provider store={store}>
      <NotificationComponent />
    </Provider>
  );
}

export default App;

关键注意点 #

• 永远不要直接修改原state：如果在reducer里直接写state.notyIndex = action.notyIndex再返回state，React无法检测到变化——因为对象引用没有改变，必须返回全新的对象。
• 如果合并多个reducer：如果后续用combineReducers整合多个reducer，那useSelector或mapStateToProps里的路径要对应，比如state.notification.notyIndex。

按照上面的步骤调整后，组件应该能在props变化时自动重新渲染了。

内容的提问来源于stack exchange，提问作者Kirit Modi