Какая альтернатива хранить функцию в магазине Redux

Question

Проблема

У меня есть такая структура:

<MenuBar />
<NavigationBar>
  <irrelevant stuff here />
  <ActionButton />
</NavigationBar>
<Router>
  <Route ...>
</Router>

И я хочу, чтобы ActionButton в NavigationBar делал что-то другое в зависимости от того, какой маршрут отображается в маршрутизаторе (стандартReactRouter Router)

Первая мысль

Моей первой мыслью было сохранить функцию в магазине и, используя mapStateToProps и connect, отправить эту функцию в качестве реквизита в ActionButton.Я бы отправлял действие с функцией в качестве полезной нагрузки всякий раз, когда должен измениться обратный вызов.

Я почти уверен, что это должно сработать, но я знаю, что хранение несериализуемых вещей в хранилище может иметь негативные последствия.В частности, это создает проблемы с сохранением и регидратацией содержимого магазина, а также мешает отладке во время путешествия. Эта ссылка из документации говорит об этом и содержит ссылку на некоторые проблемы GitHub, где это обсуждается. Этот вопрос StackOverflow также обсуждает проблему.

Вопрос

Я видел много мест, где люди говорят: «Ты не должен этого делать», но я не видел альтернативы хранению функции в магазине.Альтернатива, о которой я могу подумать, - это использование реквизита, но я действительно хотел бы избежать этого паттерна.

На данный момент мне не нужно постоянно сохранять или повторно обрабатывать хранилище, и отладка во время путешествияочень приятно иметь, но не обязательно иметь.Тем не менее, я бы хотел не жертвовать этими вещами, если есть хорошая альтернатива.

Заранее спасибо!:)

Answer 1

Вы можете поставить состояние react-router в своем магазине притока.Затем при изменении состояния навигации вы можете получить доступ к текущему маршруту из NavigationBar или ActionButton.

Вы можете сохранить логику для принятия решения о том, что кнопка делает на основе маршрута в ActionButton или NavigationBar.

Answer 2

Пара вариантов:

• Используйте промежуточное ПО для прослушивания действия "ACTION_BUTTON_CLICKED" и запускайте другую логику, основанную на других значениях (состояние хранилища, маршрут и т. Д.).Это может быть пользовательское промежуточное программное обеспечение, которое вы написали самостоятельно, или промежуточное программное обеспечение побочных эффектов общего назначения, например redux-saga или redux-observable, которое позволяет вам реагировать на отправленные действия.
• Поместите предварительно определенное действие в хранилище на основео других действиях и о том, чтобы это действие отправлялось при нажатии кнопки.

Я показываю пример предопределенного подхода к действию в моем посте Практическое Redux, часть 10: Управление модалами и контекстомменю .