web-dev-qa-db-ja.com

React reduxを使用したネイティブナビゲーションv3

Reduxでreactnavigationv3をセットアップしようとしています。反応ナビゲーションドキュメントでは、ナビゲーションを正常に設定でき、reduxを追加しなくても正常に動作します。ただし、redux class App extends React.Component{...}を追加してアクションをフックしようとすると、次のエラーがスローされます。

Invariant Violation：Invariant Violation：「Connect（AuthScreen）」のコンテキストで「store」が見つかりませんでした。ルートコンポーネントをでラップするか、カスタムReactコンテキストプロバイダーをに渡し、対応するReactコンテキストコンシューマーをConnect（AuthScreen）に接続オプションで渡します。

App.js

const MainNavigator = createBottomTabNavigator({
  welcome: { screen: WelcomeScreen },
  auth: { screen: AuthScreen },
  main: {
    screen: createBottomTabNavigator({
      map: { screen: MapScreen },
      deck: { screen: DeckScreen },
      review: {
        screen: createStackNavigator({
          review: { screen: ReviewScreen },
          settings: { screen: SettingsScreen }
        }) 
      }
    })
  }
});

const AppContainer = createAppContainer(MainNavigator);

class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    );
  }
}


export default AppContainer;

Reduxを接続したいAuthScreenは次のとおりです。

class AuthScreen extends Component {
    componentDidMount(){
        console.log('This is this.props in AuthScreen:')
        console.log(this.props);
        this.props.facebookLogin();
    }
    render(){
        return(
            <View>
                <Text>AuthScreen</Text>
            </View>
        )
    }
}

export default connect(null, actions)(AuthScreen);

このようにアプリコンテナの周りに<Provider>タグをラップすることは許可されていないようですが、誰かがこれをどのように行うことができるかについての洞察を与えることができますか？

reactjsreact-nativereact-reduxreact-navigation
3
lion_bash

React Navigation 3.xとReduxを使い始めるための簡単な例を次に示します。

App.js

import React, {Component} from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';

import Reducers from './src/Reducers';

import Preload from './src/screens/Preload';

let store = createStore(Reducers);

const AppNavigator = createStackNavigator({
  Preload: {
    screen: Preload,
  },
});

const AppContainer = createAppContainer(AppNavigator);

export default class App extends Component {
  render () {
    return (
        <Provider store={store}>
          <AppContainer/>
        </Provider>
    )
  }
}
7
Lucas Bustamante

だから、私が持っているものを投稿し、うまくいけばそれが役立つでしょう。アプリのすべてのナビゲーションを処理する別のファイル（AppNavigation.js）があります。このAppNavigationで私はこれを持っています：

const RootNavigator = createStackNavigator({
  <Code here>
})

私のRootNavigatorはAppContainer内にあります

const AppContainer = createAppContainer(RootNavigator)

次に、クラスでAppContainerをレンダリングします。

class AppNavigation extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <AppContainer screenProps={this.props} />
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(AppNavigation);

次に、App.jsで、ストアをRootNavigatorに「接続」します。

export default class App extends React.Component {

  render() {
    return (
      <Provider store={store}>
        <RootNavigator />
      </Provider>
    )
  }
}

つまり、簡単に言うと、MainNavigatorをProviderタグでラップする必要があります。

編集：

const rootReducer = combineReducers({
  reducer1,
  reducer2,
  reducer3...,
})

export default createStore(
  rootReducer,
  undefined,
  applyMiddleware(...middleware)
)

したがって、これらのレデューサーを使用すると、mapStateToPropsを介してコンポーネントに「接続」し、レデューサーの状態を使用できます。

5
kivul