is there an example using navigation-rfc + react-redux?

[sibelius]

How to combine NavigationContainer.RootContainer and Provider for instance

[ericvicenti]

You probably wouldn't want to use both NavigationContainer.RootContainer and a redux provider- you would use one of them.

I don't currently have the bandwidth to put together a redux example, but it would be great to see somebody contribute that

[lucasfeliciano]

Why I don't want to do that?

I mean, I need to connect my components to my redux store somehow and to do that I need to use <Provider /> and the connect() method that react-redux expose.

I'm just implementing that right now, I'm the stage of making my connectors so I can dynamically bind them to the right component when I call the routeMapper to render the correspondent component for that route.

When I finish I can share here what I've done and even get some feedback

[ericvicenti]

You can use both if you prefer. IMO, it will be easier to only use redux if you already have it in your app

[rt2zz]

here is a partial example of how you might go about implementing navigation-rfc with redux: https://gist.github.com/rt2zz/b8d9fe31f4d94ce903e4

The basic idea is skip the RootContainer and simply manage the navState in your redux reducer. navState is basically a object that looks like {routes: [{key: 'someRouteKey'}, index: 0}. It is helpful to use the reducer actions provided by NavigationState.

[Kureev]

I actually like your proposal, @rt2zz! Looks like NavigationContainer.RootContainer is designed to be used if you don't want to have your app driven by redux. But I don't think it should be a popular case.

What I'd like to have is a SomeCustomNavigator (mb even NavigatorContainer) which will be connected to the running redux instance and perform navigation operations based on the specific state branch changes. For instance you may have a __navigation key inside your redux state which will contain all the information about an application routing (basic stack implementation). Then the whole flow perfectly ties into a standard redux spec.

@ericvicenti should I try to make a working example?

[lucasfeliciano]

Guys I think he is talking how he can connect his components using the navigator with his redux store and not how to use the redux store for control the navigation.
I might be wrong but I think that is what he is talking about

[Kureev]

@lucasfeliciano who are you talking about? 😃

[lucasfeliciano]

about @sibeliusseraphini issue.

is there an example using navigation-rfc + react-redux?
How to combine NavigationContainer.RootContainer and Provider for instance

[sibelius]

This discussion is great: the redux + router + navigation problem does not have a definite solution.

@Kureev's idea makes even simpler how we can integrate a redux instance with the navigation

@rt2zz code should be provided by NavigationContainer instead of being provided by the user, as I think this will be almost the same

@Kureev I would like to see a working example with your ideias, maybe even with the modified NavigationContainer version

@rturk

[Kureev]

I'll try to make an example using a forked version of the navigator-rfc, @sibeliusseraphini

I post an update here when the example will be ready

[tlvenn]

Pinging @taion, he might be interested to join this discussion

[ericvicenti]

Looks like NavigationContainer.RootContainer is designed to be used if you don't want to have your app driven by redux. But I don't think it should be a popular case.

Yep, agreed. The pieces of Navigation are meant to be loosely coupled, and not depend on anything other than React (and Animated, if you want to use NavigationAnimatedView, NavigationCard, or NavigationHeader). But I am a big fan of Redux and this was intended to work well with it.

@Kureev, let me know how it goes! Hopefully you won't need to fork too many modules. Let me know if you run into any problems!

[Kureev]

After a quick brainstorming I've spent some time on prototyping routing based on the redux state. It's not on the github yet, but I want to share some of my ideas:

const store = createStore(reducer, makeNavState([<Content />]));

class Basic extends Component {
  render() {
    return (
      <Provider store={store}>
        <NavigatorRedux />
      </Provider>
    );
  }
}

In this example we have a new NavigatorRedux component which works similar to the Navigator. The only exception is that it doesn't require you to specify an initial route - it'll be taken from the specific node of the redux state.

Currently, redux navigation node has a following signature:

{
  __nav: {
    stack: new Immutable.Stack(stack),
    index: index,
  },
};

Parameters stack and index are taken from the makeNavState function. By default stack = [] and index = 0.

NavigatorRedux expose a following structure to the current route (as a prop):

nav: { route, index, stack, actions },

Where:

• route is a current route (stack.get(index))
• index current route index in the stack
• stack Immutable.Stack structure to handle a navigation stack
• actions is an ActionCreators object

NavigationRedux is bound to the redux store by react-redux library (see connect).

The biggest unsolved question for now is an animated scene transitions. But I suggest to open a new issue for this discussion.

[ohanhi]

@Kureev That looks good to me. Seems to me like NavigationRedux is effectively a pure function from Redux state to a navigator. So it takes in a navigation state as you defined it, and navigates based on only this. Is this correct?

Animated transitions can definitely be trickier (but certainly not impossible) with a pure stateless context, so I concur it's a subject for another issue.

[Kureev]

@ohanhi Exactly. NavigationRedux works only with data form the redux state.
I think I'll make a new issue about a navigation transitions.

[Kureev]

If somebody is curious, I've made a small redux navigator based on this one. It's more to validate my ideas than to make a solid standalone project, so don't take it serious. Now I'm thinking if there's a way to merge it in anyhow, @ericvicenti ? 😃

[ericvicenti]

This code is about to be moved to the react-native repo, which shouldn't have a dependency on redux. Once that time comes, it will be easier to use this code in pieces and publish your stuff as a normal module!

[zhangmq]

I forked and just move state outside NavigationRootContainer, you can use it with redux or other flux lib.
https://github.com/zhangmq/navigation-rfc

[IanVS]

Here's an example I came across for using NavigationExperimental with Redux: https://github.com/jlyman/RN-NavigationExperimental-Redux-Example

I can't vouch for it, but thought I'd at least throw in a link.

[satya164]

I recently posted a blog post on this too if anyone needs it - https://medium.com/@satya164/react-natives-navigationexperimental-with-redux-467acee02756

[sibelius]

closing this as react-navigation is out

tks