Redux action fired but it doesn't navigate (React-Navigation) - react-native

Question

I just started a new project and I'm currently integrating Redux-Saga with React-Navigation. Here is the versions I use :
"react": "16.6.1",
"react-native": "0.57.5",
"react-navigation": "^1.5.11",
"react-navigation-redux-helpers": "^1.0.5",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"redux-saga": "^1.0.1",
"reduxsauce": "^1.0.1",
Here is my Main file and the Navigator file :
export default class Root extends React.Component {
props: Props;
renderApp() {
const store = createStore(rootReducer, applyMiddleware(logger, middleware));
return (
<Provider store={store}>
<Navigator/>
</Provider>
);
}
render() {
return this.renderApp();
}
}
AppRegistry.registerComponent('Root', () => Root);
/*************************/
export const Navigator = new StackNavigator({
Main: {
screen: MainScreen
},
Tutorial:{
screen: TutorialScreen
}
},
{
initialRouteName: 'Main',
mode:'modal'
});
export const middleware = createReactNavigationReduxMiddleware(
"root",
state => state.navigation,
);
const addListener = createReduxBoundAddListener("root");
class Nav extends React.Component {
render() {
return (
<Navigator
navigation={addNavigationHelpers({
dispatch: this.props.dispatch,
state: this.props.navigation,
addListener
})} />
)
}
}
const mapStateToProps = (navigation) => ({
navigation,
});
const mapDispatchToProps = dispatch => ({
dispatch
});
export default connect(mapStateToProps, mapDispatchToProps)(Nav)
The Actions is correctly called when I assigned a Navigate Actions navigate: (routeName, params = {}) => dispatch(Actions.navigate(routeName, params)) on my main file for a Button.
But the View does'nt "navigate" and stay stuck on the first View. It looks like that redux is correctly set then, but the Navigation actions not well managed. But I'm not able to find what is the exact reason of this problem. Any ideas from where it could come from ?
My container file :
type Props = {
user?: Object,
navigate: (routeName: string, params?: Object) => void,
};
class MainScreen extends React.Component {
render() {
const {user, navigate}= this.props;
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Button title="mainScreen" onPress={()=> navigate("Tutorial",{})} >
</Button>
</View>
);
}
}
const mapDispatchToProps = dispatch => ({
navigate: (routeName, params = {}) => dispatch(Actions.navigate(routeName, params))
});
const mapStateToProps = (state) => {
const { user } = state
return { user }
};
export default connect(mapStateToProps, mapDispatchToProps)(MainScreen);

Answer 1

You are recreating your store each time the component is rendered.
const store = createStore(rootReducer, applyMiddleware(logger, middleware));
export default class Root extends React.Component {
props: Props;
renderApp() {
return (
<Provider store={store}>
<Navigator/>
</Provider>
);
}
render() {
return this.renderApp();
}
}