Как добавить свойства к реакции-маршрутизатору-избыточности LOCATION_CHANGE? - PullRequest
Новая
       66

Как добавить свойства к реакции-маршрутизатору-избыточности LOCATION_CHANGE?

0 голосов
/ 06 октября 2018

Я пишу приложение, используя Reaction-router-redux .Когда отправляется действие LOCATION_CHANGE, я хочу обновить пользовательский интерфейс, чтобы показать прогресс в зависимости от того, как далеко в опросе находится пользователь.Мое состояние имеет такую ​​структуру: 

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

У меня есть функция, которая просматривает вопросы в свойстве опроса и может определять ход выполнения на основе первого экземпляра вопроса, являющегося null.В приведенном выше примере прогресс будет равен 1, так как вопрос2 равен null (еще не получен ответ).

Для обновления пользовательского интерфейса у меня есть редуктор пользовательского интерфейса, подписанный на действие @@router/LOCATION_CHANGE, в котором яможет запустить функцию для определения прогресса.

Проблема, с которой я сталкиваюсь, заключается в том, что в редукторе пользовательского интерфейса у меня есть доступ только к состоянию пользовательского интерфейса и полезной нагрузке из LOCATION_CHANGE, а не из опроса.

Можно ли изменить LOCATION_CHANGE для включения дополнительных свойств в его полезную нагрузку?

1 Ответ

0 голосов
/ 10 октября 2018

На мой взгляд, лучший способ решить вашу проблему - использовать промежуточное ПО для перехвата всех @@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.Если да, вы все равно можете получить представление об этом методе.

...