使用React-Native和Redux访问Actions中的导航器

Question

使用React-Native(0.19)和Redux,我能够在React Components中从一个场景导航到另一个场景,如下所示:

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

此外,我希望能够从应用程序的任何位置(减速器和/或动作)将组件推送到导航器.

示例流程:

1. 用户填写表格并按"提交"
2. 我们将表单数据分派给一个动作
3. 操作设置表明它已开始通过网络发送数据
4. 该操作将获取数据
5. 完成后,操作将调度提交已结束
6. 操作导航到最近创建的新数据

我用我的方法看到的问题:

• 导航器在道具中,而不是状态.在reducer中,我无法访问道具
• 我需要navigator进入任何需要它的行动.

我觉得我遗漏了一些关于如何从动作中访问Navigator而不作为参数发送的东西.

Answer 1

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

• 您可以从减速机更改路线;

• 您可以将路由器连接到存储和派遣自己的行动,将通知有关商店路由变化(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

看一下这个例子吧.

3.在您的reducer中捕获感兴趣的操作
对于此示例,我有一个globalreducer(我保留所有应用程序所需的信息),我在其中设置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()
    }
  }

PS:记得检查一下currentRoute === 'payment',否则你会在每次改变路线时开始doSomething()!

另外,看一下README.md,了解有关与Redux集成的其他内容.
希望它有所帮助,Redux万岁!