Question

我正在使用react-router-redux编写应用程序。派发LOCATION_CHANGE操作时，我想基于用户在调查中的距离来更新UI以显示进度。我的状态具有以下结构：

ui: {
  progress: 0
},
survey: {
  question1: true,
  question2: null
}

我有一个功能，可以遍历调查属性中的问题，并可以根据问题的第一个实例null确定进度。在上面的示例中，问题2为null（尚未回答），进度为1。

要更新UI，我有一个UI reducer订阅了@@router/LOCATION_CHANGE操作，可以在其中运行该函数以确定进度。

我面临的问题是，在UI缩减器中，我只能访问LOCATION_CHANGE的UI状态和有效负载，而无法访问调查。

是否可以修改LOCATION_CHANGE以在其有效负载中包含其他属性？

Answer 1

我认为，解决问题的最佳方法是使用中间件来拦截所有@@router/LOCATION_CHANGE动作并在逻辑到达简化程序之前执行您的逻辑。您在中间件中拥有getState功能，因此您可以同时读取ui和survery状态。

中间件

export default ({ dispatch, getState }) => (next) => (action) => {
  if (action.type === '@@router/LOCATION_CHANGE') {
    const state = getState(); // this is the whole redux state
    const progress = getNewProgressValue(state);
    dispatch(updateProgress(progress)); // updateProgress is the action creator to update progress value
  }
  next(action);
}

您还需要根据progress动作创建者分派的动作来修改减速器以更新updateProgress。

注意：我假设您没有使用redux-saga。如果是这样，您仍然可以从此方法中获得灵感。

如何添加属性到react-router-redux LOCATION_CHANGE？

1 个答案: