Explore using NavigationTabsReducer, NavigationStackReducer, .etc

[respectTheCode]

RN includes several reducers that look like they should work with redux. Has any explored this?

https://github.com/facebook/react-native/tree/master/Libraries/NavigationExperimental/Reducer

[bnjmnt4n]

Implementing our own reducers, which doesn't cover all the functionality of the navigation, seems like a pain long-term. Although the format might be different, perhaps we could base it off the included reducers?

[respectTheCode]

I did some experimenting this weekend and TabsReducer and StackReducer work with redux.

const combineReducers = require("redux").combineReducers;

const React = require("react-native");
const {
    NavigationExperimental
} = React;
const {
    Reducer: NavigationReducer
} = NavigationExperimental;

let counter = 0;

module.exports = combineReducers({
    nav: NavigationReducer.TabsReducer({
        key: "tabExample",
        initialIndex: 0,
        tabReducers: [
            NavigationReducer.StackReducer({
                getPushedReducerForAction: action => {
                    if (action.tab === 0) {
                        return state => (state || {key: "tab-0-page-" + (counter++), type: action.type});
                    }
                    return null;
                },
                initialState: {
                    key: "tab-0-page",
                    label: "Tab 0",
                    index: 0,
                    children: [
                        {key: "Tab 0 Root", type: "page"}
                    ]
                }
            }),
            NavigationReducer.StackReducer({
                getPushedReducerForAction: action => {
                    if (action.tab === 1) {
                        return state => (state || {key: "tab-1-page-" + (counter++), type: action.type});
                    }
                    return null;
                },
                initialState: {
                    key: "tab-1-page",
                    label: "Tab 1",
                    index: 0,
                    children: [
                        {key: "Tab 1 Root", type: "page"}
                    ]
                }
            })
        ]
    })
});

[jlyman]

Good example @respectTheCode. I think it can go both ways. I'm using a hybrid of the two right now, where the dev would control the actions and basic reducers, but where the reducers are hooking into NavigationStateUtils to do some of the state manipulation. Doing so gives a little more control over what happens during these state transitions, more opportunities to hook into it.

I wrote the examples this way on purpose to make it more accessible to those of us familiar to seeing Redux style reducers, but this is very valuable as well. I think I'll add a note in the README pointing to your code excerpt as an example of how to do it in a more pure manner.

[jlyman]

Put up a branch (pure-rn-reducers) that follows this convention as well for others to see how it might apply in the sample app.

[s4kh]

Hi all,

Thanks for the example, I think this is the pretty clean and basic example implementing NavigationExperimental. Even going through the docs in navigation-rfc repo, I am still struggling to get my head around the new navigation concepts. If you guys don't mind, can you please explain me the concepts by answering this stackoverflow question?, so others can also benefit from it.