Действие Redux запущено, но оно не перемещается (React-Navigation) - PullRequest
Новая
       45

Действие Redux запущено, но оно не перемещается (React-Navigation)

0 голосов
/ 27 февраля 2019

Я только начал новый проект, и в настоящее время я интегрирую 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)) в моем главном файле для кнопки.

Но представление не "перемещается" и остается застрявшим в первом представлении.Похоже, что в этом случае правильно задан редукс, но действия по навигации плохо управляются.Но я не могу найти точную причину этой проблемы.Любые идеи, откуда это может прийти?

Файл моего контейнера: 

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

1 Ответ

0 голосов
/ 27 февраля 2019

Вы воссоздаете свой магазин каждый раз, когда компонент отображается. 

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