如何响应redux中的状态更改并调度另一个操作

Question

谁能告诉我如何使用react-redux:

组件A分派一个动作更新状态(async)

组件B(不是a的子组件)需要能够检测到状态何时改变并调度另一个动作。

我的问题是当我尝试在组件B中调度动作2时，状态仍然处于初始状态，并且没有更新。

我也尝试过在componentWillUpdate中调度动作2，然而，这会创建一个无限循环，因为第二个动作也更新状态(也是异步的)

大致是这样的:

//----- Component A
class ComponentA extends React.Component {
  constructor(props) {
    super(props);
    this.props.dispatch(loadEvents()); // loadEvents is async and will   update state.eventsState
  }
}
const mapStateToProps = function (state) {
  return {
    eventsState: state.eventsState,
  };
};
export default connect(mapStateToProps)(ComponentA);

//----- Component B
class ComponentA extends React.Component {
  constructor(props) {
    super(props);
    props.dispatch(getEventUsers(props.eventsState.eventId)); // the eventsState is in initial state here (empty)...where do I call getEventUsers?
  }
  componentWillUpdate(nextProps) {
    nextProps.dispatch(getEventUsers(props.eventsState.eventId)) // Creates an infinite loop, getEventUsers also updates state
  }
}
const mapStateToProps = function (state) {
  return {
    eventsState: state.eventsState,
  };
};
export default connect(mapStateToProps)(ComponentA);

Answer 1

不用看你的Redux代码，我会说你的组件B在构造函数中得到空数据，因为它在大约同一时间实例化了一个组件a，在这一点上，由组件a构造函数发起的异步请求仍在进行中。

当异步请求完成时，Redux应该触发一个包含接收到的数据的操作。然后，您的reducer将这些数据置于状态，这反过来会改变您连接的组件的props并强制它们进行渲染。

只有当props.eventState.eventId存在并且已经改变时，你才应该调度getEventUsers。