如何应对redux中的状态变化并发出另一个动作？

Question

有人可以给我提供有关如何使用react-redux执行以下操作的线索:

组件A调度更新状态的操作(异步)

组件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 应该触发一个包含接收到的数据的操作。然后，您的减速器将这些数据放入状态中，这反过来会更改连接组件的属性并强制它们重新渲染。

仅当 props.eventState.eventId 存在且已更改时，才应调度 getEventUsers。