React+Redux实时应用：异步更新Store后容器未获Props变更问题

看起来你碰到了Redux状态更新后组件没同步的经典问题，我帮你梳理几个核心排查点和解决办法：

1. 先确认Reducer是否遵循了不可变更新原则 #

Redux依赖状态不可变来检测变化，如果你的reducer直接修改了原state对象（比如state.data.push(newObj)），Redux会认为状态没有改变，组件自然不会重新渲染。

正确的做法是返回全新的状态对象，示例如下：

// 错误写法：直接修改原state
function myReducer(state = initialState, action) {
  switch(action.type) {
    case 'UPDATE_OBJECT':
      state.objects.push(action.payload);
      return state; // 返回原对象，Redux检测不到变化
    default:
      return state;
  }
}

// 正确写法：返回新的状态对象
function myReducer(state = initialState, action) {
  switch(action.type) {
    case 'UPDATE_OBJECT':
      return {
        ...state, // 展开原状态的所有属性
        objects: [...state.objects, action.payload] // 新建数组添加新对象
      };
    default:
      return state;
  }
}

2. 检查容器组件的Redux连接是否正确 #

确保你用connect时，正确把需要的state映射到组件props上，而且不要在mapStateToProps里返回不必要的新引用（比如每次都新建空对象），同时确认映射的状态路径和reducer中的路径一致。

示例：

import { connect } from 'react-redux';

class YourContainer extends Component {
  render() {
    // 使用映射后的props渲染内容
    return <div>{this.props.objects.map(obj => <div key={obj.id}>{obj.content}</div>)}</div>;
  }
}

// 正确映射state到组件props
const mapStateToProps = (state) => {
  return {
    objects: state.myReducer.objects // 对应reducer在store中的状态路径
  };
};

// 用connect包裹组件，才能拿到映射的props和dispatch
export default connect(mapStateToProps)(YourContainer);

3. 确认STOMP回调中正确dispatch了action #

你的STOMP连接类里，收到后端消息后要确保调用的是Redux store的dispatch方法——可以通过组件props传入（只要组件被connect包裹过），或者直接导入全局store（单store场景下）。

比如修正你的SearchButtons组件（注意你代码里的类名拼写是SearcButtons，建议修正为SearchButtons）：

class SearchButtons extends Component {
  start_twitter_stream = () => {
    const socket = new SockJS('/your-backend-endpoint');
    const stompClient = Stomp.over(socket);
    
    stompClient.connect({}, (frame) => {
      stompClient.subscribe('/topic/your-topic', (message) => {
        const newObject = JSON.parse(message.body);
        // 调用Redux的dispatch触发状态更新
        this.props.dispatch({ type: 'UPDATE_OBJECT', payload: newObject });
      });
    });
  };

  render() {
    return (
      <div className="searchbuttons">
        <RaisedButton className="bttn" label="Start" onClick={this.start_twitter_stream} />
      </div>
    );
  }
}

// 必须用connect包裹，才能拿到dispatch方法
export default connect()(SearchButtons);

4. 用Redux DevTools验证状态是否真的更新 #

建议安装Redux DevTools浏览器扩展，当STOMP收到消息时，查看action是否被正确触发，store中的状态是否确实发生了变化：

• 如果状态没变化：问题出在action或reducer的逻辑
• 如果状态变化了但组件没更新：问题出在组件的connect配置、shouldComponentUpdate（或React.memo）阻止了重渲染，或者渲染逻辑没有用到更新后的props

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