时间戳

首页 > 解决方案 > 如何向 react-router-redux LOCATION_CHANGE 添加属性？

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

问题描述

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

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

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

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

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

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

标签： reduxreact-reduxreact-router-redux

解决方案

在我看来，解决您的问题的最佳方法是使用中间件拦截所有@@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. 如果你是，你仍然可以从这个方法中得到想法。

推荐阅读