Доступ к навигатору в действиях с помощью React-Native и Redux

Используя React-Native (0.19) и Redux, я могу перемещаться из сцены в сцену в React Components следующим образом:

this.props.navigator.push({
 title: "Registrations",
 component: RegistrationContainer
});

Кроме того, я хотел бы иметь возможность нажимать компоненты на навигатор из любого места приложения (редукторы и/или действия).

Пример потока:

Пользователь заполняет форму и нажимает Отправить
Мы отправляем данные формы в действие
В действии установлено, что он начал отправлять данные по проводу
Действие извлекает данные
По завершении действия отправляет сообщение о завершении подачи.
Действие переходит к новым недавно созданным данным.

Проблемы, которые я вижу с моим подходом:

Навигатор находится в реквизитах, а не в состоянии. В редукторе у меня нет доступа к реквизитам.
Мне нужно передать navigator в любое действие, которое ему нужно.

Я чувствую, что мне не хватает чего-то немного простого в том, как получить доступ к Navigator из действий без отправки в качестве параметра.

Ответ 1

На мой взгляд, лучший способ обработки навигации с помощью Redux - react-native-router-flux, поскольку он может делегировать всю навигационную логику в Redux:

Вы можете изменить маршрут из редуктора,
Вы можете подключить маршрутизатор к хранилищу и отправить свои собственные действия, которые сообщают магазину об изменениях маршрута (BEFORE_ROUTE, AFTER_ROUTE, AFTER_POP, BEFORE_POP, AFTER_DISMISS, BEFORE_DISMISS);

Пример

Вот пример того, как легко вы можете сохранить ориентированный на текущий момент маршрут в хранилище и обработать его в компоненте (который будет знать, что он сфокусирован):

1. Подключите <Route> к Redux
Подключение a <Route> к Redux легко, а не:

<Route name="register" component={RegisterScreen} title="Register" />

вы можете написать:

<Route name="register" component={connect(selectFnForRegister)(RegisterScreen)} title="Register" />

Вы также можете просто подключить сам компонент в своем собственном файле, как обычно.

2. Подключите <Router> к Redux
Если вам необходимо сообщить Redux о состоянии навигации (т.е. Когда вы поместите маршрут), просто переопределите компонент <Router>, включенный в react-native-router-flux, с подключенным:

import ReactNativeRouter, { Actions, Router } from 'react-native-router-flux'
const Router = connect()(ReactNativeRouter.Router)

Теперь, когда вы используете <Router>, он будет подключен к хранилищу и вызовет следующие действия:
- Actions.BEFORE_ROUTE
- Actions.AFTER_ROUTE
- Actions.AFTER_POP
- Actions.BEFORE_POP
- Actions.AFTER_DISMISS
- Actions.BEFORE_DISMISS

Взгляните на этот для примера.

3. Поймайте заинтересованные действия в своем редукторе
В этом примере у меня есть редуктор global (где я сохраняю информацию, необходимую всем моим приложением), где я устанавливаю currentRoute:

case Actions.AFTER_ROUTE:
case Actions.AFTER_POP:
  return state.set('currentRoute', action.name)

Теперь редуктор поймает каждое изменение маршрута и обновит global.currentRoute целевым маршрутом.
Здесь вы также можете сделать много других интересных вещей, например, сохранить историю навигации в массиве!

4. Обновление компонента в фокусе
Я делаю это на componentDidUpdate моего компонента маршрута с именем payment. Если global.currentRoute - payment, а предыдущий global.currentRoute был другим, чем только что сфокусирован компонент.

  componentDidUpdate(prevProps) {
    const prevRoute = prevProps.global.currentRoute
    const currentRoute = this.props.global.currentRoute
    if (currentRoute === 'payment' && prevRoute !== currentRoute) {
      this.props.actions.doSomething()
    }
  }

P.S.: Не забудьте проверить currentRoute === 'payment', иначе вы начнете doSomething() при каждом изменении маршрута!

Кроме того, посмотрите README.md для изучения других вещей об интеграции с Redux.
Надеюсь, это поможет, долго жить Редукс!

Ответ 2

Возможно, вы можете передать информацию о названии и компоненте в действии, а компонент с навигатором затем может нажать правую сцену с информацией о состоянии.