react-native - 使用 React-Native 和 Redux 在 Actions 中访问导航器

Question

使用 React-Native (0.19) 和 Redux，我可以在 React 组件中从一个场景导航到另一个场景，如下所示:

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

此外，我希望能够从应用程序中的任何位置( reducer 和/或操作)将组件推送到导航器。

示例流程:

用户填写表格并按提交

我们将表单数据发送到一个 Action

该操作设置状态，它已开始通过线路发送数据

该操作获取数据

完成后，action 发送提交已结束

操作导航到最近创建的新数据

我的方法遇到的问题:

导航器在 Prop 中，而不是状态中。在 reducer 中，我无法访问 Prop

我需要通过navigator进入任何需要它的行动。

我觉得我错过了一些关于如何在不作为参数发送的情况下从操作访问 Navigator 的简单内容。

Answer 1

在我看来，使用 Redux 处理导航的最佳方式是使用 react-native-router-flux。 ，因为它可以将所有导航逻辑委托(delegate)给 Redux:

您可以从 reducer 更改路线；

您可以将路由器连接到存储并调度其自己的操作，这些操作将通知存储有关路由更改(BEFORE_ROUTE、AFTER_ROUTE、AFTER_POP、BEFORE_POP、AFTER_DISMISS、BEFORE_DISMISS)；

一个例子
这是一个示例，说明您可以如何轻松地将当前聚焦的路线保存在商店中并在组件中处理它(这将意识到被聚焦):
1.连接<Route>转至 Redux
连接 <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

看看 this例如。

3. 在你的reducer中捕获感兴趣的 Action
对于这个例子，我有一个 global reducer (我保存所有应用程序所需的信息)，我在其中设置 currentRoute :

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

现在，reducer 将捕获每个路由更改并更新 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() !

另外， take a look a the README.md用于学习有关与 Redux 集成的其他内容。
希望它有所帮助，Redux 万岁!