Redux 如何添加属性以响应路由器重复使用位置的更改？

我正在写一个应用程序使用。当

LOCATION\u CHANGE

操作被调度时，我想根据用户在调查中的距离更新UI以显示进度。我的州有这样的结构：

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

我有一个函数，可以循环浏览survey属性中的问题，并可以根据问题的第一个实例

null

确定进度。在上述示例中，进度将为1，因为问题2为

null

（尚未回答）

要更新UI，我订阅了一个UI reducer以执行

@@router/LOCATION\u CHANGE

操作，在该操作中，我可以运行函数来确定进度

我面临的问题是，在UI reducer中，我只能从

LOCATION\u CHANGE

访问UI状态和有效负载，而不能访问调查

---

是否可以修改

位置更改

以在其有效负载中包含其他属性？

我认为解决问题的最佳方法是使用中间件拦截所有

@@router/LOCATION\u 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);
}

您还需要修改reducer以根据

updateProgress

action creator调度的操作更新

progress

注意：我假设您没有使用

redux saga

。如果你是，你仍然可以从这个方法中得到想法