Redux 操作已触发，但它无法导航(反应导航)

Question

我刚刚启动了一个新项目，目前我正在将Redux-Saga与React-Navigation集成。这是我使用的版本：

    "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",

这是我的主文件和导航器文件：

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)

当我在主文件上为按钮分配导航操作navigate: (routeName, params = {}) => dispatch(Actions.navigate(routeName, params))时，该操作是正确调用的。

但是，视图确实"导航"并保持在第一个视图上。当时正确设置了Redux，但是导航操作却没有得到很好的管理。但是我找不到这个问题的确切原因。有什么想法来自哪里？

我的容器文件：

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

每次渲染组件时，您都在重新创建商店。

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();
  }
}