React-native-router-flux: Navigating when changing redux state

[geniuscd]

I'm testing both react navigation (till now I found one drawback only on Modals screens where a workaround must implemented) and react native router flux v4 beta 22. (using redux for both)

I like the idea that in _react navigation_ we can navigate to a screen from a reducer when changing the state of the route, it will simply navigate to another screen.
in _RNRF_, at least in the examples that i saw, we must call the ACTIONS from within the component (view) in order to navigate. for simple apps thats ok. But for larger apps its advisable that the state handles the screen navigation.

any thought?

discussion

[aksonov]

Duplicate of https://github.com/aksonov/react-native-router-flux/issues/2115

[geniuscd]

Thank you for your reply. I already read #2115 and didn't understand the fact that i need to call ACTION.... in the reducer? for now it's working but is it the correct way to do it?

case 'user_login_success': Actions.profile(); return state;

[aksonov]

It is possible but it is not fully 'redux' style. So with v4 you could do the same as with react-navigation - integrate your reducer with navigation reducer and pass own dispatch/state into RNRF.

[aksonov]

You should refer to mentioned demo.

[geniuscd]

@aksonov I tried to implement from this demo link but i was getting an error in the getStateForAction. I guess because it was returning defaultReducer(state, action); instead of return { ...state, PARAMS }
I will try to integrate what you said above and see what will happen.

in the reducer case ActionConst.FOCUS: is only called if and only if Action.PARAMS is called from a view.

[ssomnoremac]

@geniuscd , yeah I got the same. Did you get around the error?

[geniuscd]

@ssomnoremac yes :P i used react-navigation

[jordenchang55]

I also got the error and fixed it.

// it is important to load reducers AFTER actions.create (so no import here)
const reducers = require('./reducers').default;

You should make sure your implementation import the reducer by correct order. When I changed the above line of code to the correct place, and it worked.

[ssomnoremac]

@jordenchang55 that got me around the error, thanks. My App.js was not configured to the example; however, using the exact same route-reducer and the following, none of the router actions (FOCUS, PUSH, etc) are seen using master RNRF:

const navigator = Actions.create(
    <Stack ...
)
const reducers = require('./reducers').default;

const ReduxReducer = connect((state) => ({ state: state.route }))(Router);

const middleware = [thunk];
const store = compose(
    applyMiddleware(...middleware)
)(createStore)(reducers);

...
                <Provider store={store}>
                    <View style={{flex:1, backgroundColor: "#ccc"}}>
                        <ReduxReducer navigator={navigator} />
                    </View>
                </Provider>

[jordenchang55]

@ssomnoremac I compared our code, and found that changing your store resolves the problem.

// Your code
const store = compose(applyMiddleware(...middlewares))(createStore)(reducers);
// My code
const store = createStore(
  reducers,
  compose(
    applyMiddleware(...middlewares)
  )
);

[ssomnoremac]

hmm, strange, that didn't fix it for me. I'm seeing all actions except the router. It must mean I have something else setup differently. I'm going to have a closer look. I won't give up on this! Thanks for your help @jordenchang55