react-native 在 connect(component) 的上下文中找不到 store

Question

希望有人能给我一个提示，所以这是我在 react-native 应用程序中的 Redux 实现：

我的 app.js：就像我的导师一样，在这个文件中设置我的商店，并将我的容器包装在 Provider 中。

import React from 'react';
import Welcome from './screens/Welcome';
import ShowCase from './screens/ShowCase';
import ProductDetails from './screens/ProductDetails';

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

import {createStore} from 'redux';
import {Provider} from 'react-redux';
import rootReducer from './Reducer';

const store = createStore(rootReducer);

const pushRouteOne = createStackNavigator({
  page1: {
    screen: Welcome
  },
  page2: {
    screen: ShowCase
  },
  page3: {
    screen: ProductDetails
  }
}, {
  initialRouteName: 'page1',
  mode: 'modal',
  headerMode: 'none'
})

const AppContainer = createAppContainer(pushRouteOne);

const App = () => {
  return (
    <Provider store={store}>
      <AppContainer />
    </Provider>
  )
}

export default AppContainer; 

这是我的操作文件：我使用Axios从虚假 API 中获取一些数据。

import {GET_BOOK} from './../Types/type';
import axios from 'axios';

const getBook = async (books) => {
  const res = await axios.get('https://fakerestapi.azurewebsites.net/api/Books');
  dispatch(getAsync(res.data));
  return {
    type: GET_BOOK,
    payload: res
  }
};

export default getBook;

这是我的减速器：我应该提到我结合了减速器，但我认为将代码放在这里没有用，但是如果您需要检查一下，我会更新问题。

import {GET_BOOK} from '../Types/type';

const bookReducer = (state = null, action) => {
  switch(action.type){
    case GET_BOOK:
      state = action.payload;
      return {
        data: state,
        alert: false
      };

      default:
        return state;
  }
}

export default bookReducer;

这是我的欢迎页面，它是第一页：

import React, { useEffect } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity
} from 'react-native';

import getbook from './../Action/get_book';
import {connect} from 'react-redux';
import {bindActionCreator} from 'redux';


const Welcome = (props) => {

  const navigationOptions = ({
    navigation
  }) => {
    const {
      params = {}
    } = navigation.state;
  }

  return (
    <View style={styles.screen}>
      <View style={styles.img_container}>
        <Image style={styles.shop_img} source={require('../Images/shopping.png')} />
      </View>
      <TouchableOpacity style={styles.btn_main} onPress={() => {
        const { navigate } = props.navigation;
        navigate('page2');
      }}>
        <Text style={styles.welc_text}>Get Started</Text>
      </TouchableOpacity>
    </View>
  )
}

const mapStateToProps = state => {
  return {
    books : state.book
  }
};

const mapDispatchToProps = dispatch =>
bindActionCreator({
  Getbook : getbook
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(Welcome)

我遇到的错误是"could not find store in the context of Connect(Welcome)" 。 我看到一些建议在index.js文件中使用Provider答案，我也尝试过，但得到了相同的结果。 任何帮助，将不胜感激。

Answer 1

而不是export default AppContainer;

做export default App;

Answer 2

您的代码有很多问题将尝试总结所有

• App.js --> 我认为您正在使用 redux thunk 来处理副作用（api 调用），但您没有将 thunk 连接到您的商店。

import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(rootReducer, applyMiddleware(thunk));

更多文档https://github.com/reduxjs/redux-thunk

• 我假设您的操作是正确的，但您缺少一些代码
• 你的减速机是正确的
• 您的欢迎组件是功能组件，因此使用钩子代替地图操作和道具

const Welcome = (props) => {

  const navigationOptions = ({
    navigation
  }) => {
    const {
      params = {}
    } = navigation.state;
  }
  //Dispatch actions
  const dispatch = useDispatch();
  const bookActions = bindActionCreators({
    Getbook : getbook
  }, dispatch);
  // selector
  const books = useSelector(state => state.books);
   
  return (
    <View style={styles.screen}>
      <View style={styles.img_container}>
        <Image style={styles.shop_img} source={require('../Images/shopping.png')} />
      </View>
      <TouchableOpacity style={styles.btn_main} onPress={() => {
        const { navigate } = props.navigation;
        navigate('page2');
      }}>
        <Text style={styles.welc_text}>Get Started</Text>
      </TouchableOpacity>
    </View>
  )
}

export default Welcome;