反应导航在“ Connect(AuthScreen)”的上下文中找不到“存储”

时间:2018-12-17 11:37:48

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

我正在尝试使用我的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”。将根组件包装在中,或在连接选项中将自定义React上下文提供程序传递给Connect(AuthScreen),并将相应的React上下文使用者传递给Connect(AuthScreen)。

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

2 个答案:

答案 0 :(得分:0)

您尚未将商店连接到此组件 libname teralib teradata server=myserver user=myuserid pwd=mypass; libname sqllib sqlsvr user=testuser password=testpass; libname saslib "somelocation"; /* you do not need this unless your manipulating something in SAS*/ proc sql; create teralib.yourotherteradatatable as select a.id, b.col from sqllib.yoursqltable a inner join teralib.yourteradatatable b on a.yourinterstedcol = b.yourinterstedcol; quit; ,并且已通过export default connect(null, actions)(AuthScreen);,在此应传递一些null,而在mapper,则应定义哪些功能要从减速器导入。

答案 1 :(得分:0)

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;