反应导航在“连接（AuthScreen）”的上下文中找不到“商店”答案

【问题标题】：React navigation Could not find "store" in the context of "Connect(AuthScreen)"反应导航在“连接（AuthScreen）”的上下文中找不到“商店”
【发布时间】：2018-12-17 11:37:47
【问题描述】：

我正在尝试使用我的 expo react 本机应用程序登录 Facebook。但我有一个问题。我用的是redux。我的 app.js 在这里。

import { createBottomTabNavigator,  createAppContainer, createStackNavigator 

} from 'react-navigation';

import AuthScreen from './screens/AuthScreen';
import { Provider } from  'react-redux'
import store from './store';

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

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


export default createAppContainer(MainNavigator)

这是我的 AuthScreen.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { connect } from 'react-redux';
import * as actions from '../actions/auth_actions';

class AuthScreen extends Component {
    componentDidMoun(){
        this.props.facebookLogin();
    }
    render(){
        return(
            <View>
                <Text>Auth</Text>
            </View>
        )
    }
}

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

我在 auth_action.js 文件中调用了 facebookLogin() 函数

export const facebookLogin = () => async dispatch => {

let token = await AsyncStorage.getItem('fb_token');
  if(token) {
    dispatch({ type: FACEBOOK_LOGIN_SUCCESS, payload: token })
  }else{
      doFacebookLogin(dispatch);
  }
}

reducer/index.js 文件

import { combineReducers } from 'redux';

export default combineReducers({
    auth: () => { return {} }
});

这是我的 store.js 文件。

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';

const store = createStore(
    reducers,
    {},
    compose(
        applyMiddleware(thunk)
    )
);

export default store;

但是我收到了这个错误。

不变违规：在“Connect(AuthScreen)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(AuthScreen)，并将相应的 React 上下文消费者传递给。

有什么问题？你能帮帮我吗？

【问题讨论】：

你是怎么解决这个问题的？请回答。我也面临同样的问题

标签： reactjs react-native redux react-navigation expo

【解决方案1】：

您尚未将您的商店连接到此组件export default connect(null, actions)(AuthScreen);，并且您已经传递了null，您应该在其中传递一些mapper 和只是action，您应该在其中定义要从reducer 导入的功能。

【讨论】：

我改成这样了。 const mapDispatchToProps = (dispatch) => { return { facebookLogin: () => dispatch(facebookLogin()) } } 但它不起作用
同样的错误。 :( 在上下文中找不到“商店”
所以与mapStateToProps 相同的答案到目前为止，您已经从auth_action 映射了所需的功能，但是状态呢？另外，我不确定 createStore 中 compose 的用法
github.com/ipeedy/react-native-boilerplate 可能会有所帮助，例如查看screens/setting
非常感谢您的回答。我会尝试样板文件和 mapStateToProps。

【解决方案2】：

import React, { Component } from "react";
import { connect } from "react-redux";
import * as actions from "../actions";
import {
  createBottomTabNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";

import AuthScreen from "../screens/AuthScreen";
import HomeScreen from "../screens/HomeScreen";
import SettingsScreen from "../screens/SettingsScreen";
import DeckScreen from "../screens/DeckScreen";
import MapScreen from "../screens/MapScreen";
import ReviewScreen from "../screens/ReviewScreen";

const AppNavigator = createBottomTabNavigator({
  home: { screen: HomeScreen },
  auth: { screen: AuthScreen },
  main: {
    screen: createBottomTabNavigator({
      map: { screen: MapScreen },
      deck: { screen: DeckScreen },
      review: {
        screen: createStackNavigator({
          review: { screen: ReviewScreen },
          settings: { screen: SettingsScreen }
        })
      }
    })
  }
});

const AppContainer = createAppContainer(AppNavigator);

    enter code here

class AppNavigation extends Component {
  render() {
    return <AppContainer screenProps={this.props} />;
  }
}

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

import React, { Component } from "react";
import { Provider } from "react-redux";
import AppNavigation from "./navigation/AppNavigation";
import store from "./store";
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <AppNavigation />
      </Provider>
    );
  }
}
export default App;

【讨论】：