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

Question

我正在使用 react-router-redux 编写应用程序。调度 LOCATION_CHANGE 操作后，我想更新 UI 以根据用户在调查中的进度显示进度。我的州有这样的结构：

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

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

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

我面临的问题是，在 UI reducer 中，我只能访问 UI 状态和来自 LOCATION_CHANGE 的有效负载，而不是调查。

是否可以修改 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);
}

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

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

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

How to add properties to react-router-redux LOCATION_CHANGE?

redux

react-redux

react-router-redux