Javascript react native在connect(组件)的上下文中找不到存储

Javascript react native在connect(组件)的上下文中找不到存储,javascript,android,reactjs,react-native,redux,Javascript,Android,Reactjs,React Native,Redux,希望有人能给我一个提示,下面是我在react native app中的Redux实现: my app.js: 只需在这个文件中设置我的存储,并像我的导师那样在提供者中包装我的容器 import React from 'react'; import Welcome from './screens/Welcome'; import ShowCase from './screens/ShowCase'; import ProductDetails from './screens/ProductDeta

希望有人能给我一个提示,下面是我在react native app中的Redux实现:

my app.js: 只需在这个文件中设置我的存储,并像我的导师那样在提供者中包装我的容器

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; 
这是我的减缩器:我应该提到我组合了减缩器,但我认为把代码放在这里是没有用的,但是如果你需要检查,我会更新这个问题

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)
import React,{useffect}来自“React”;
进口{
样式表,
看法
文本,
形象,,
可触摸不透明度
}从“反应本机”;
从“/../Action/get_book”导入getbook;
从'react redux'导入{connect};
从“redux”导入{bindActionCreator};
康斯特欢迎=(道具)=>{
常数导航选项=({
航行
}) => {
常数{
参数={}
}=导航状态;
}
返回(
{
const{navigate}=props.navigation;
导航(“第2页”);
}}>
开始
)
}
常量mapStateToProps=状态=>{
返回{
书籍:state.book
}
};
const mapDispatchToProps=调度=>
bindActionCreator({
Getbook:Getbook
},派遣);
导出默认连接(mapStateToProps、mapDispatchToProps)(欢迎使用)

我遇到的错误是
“在Connect(Welcome)”上下文中找不到存储”
。我在
index.js
文件中看到一些建议使用
Provider
的答案,我也尝试过,但得到了相同的结果。任何帮助都将不胜感激。

而不是
导出默认AppContainer


不导出默认应用程序

而不是
导出默认AppContainer


不导出默认应用程序

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

  • App.js-->我认为您正在使用redux thunk产生副作用(api调用),但您没有将thunk连接到您的应用商店
更多文档

  • 我认为您的操作是正确的,但您的部分缺少一些代码
  • 你的减速器是正确的
  • 您的欢迎组件是功能组件,因此使用钩子代替映射动作和道具
const欢迎=(道具)=>{
常数导航选项=({
航行
}) => {
常数{
参数={}
}=导航状态;
}
//派遣行动
const dispatch=usedpatch();
const bookActions=bindActionCreators({
Getbook:Getbook
},派遣);
//选择器
const books=useSelector(state=>state.books);
返回(
{
const{navigate}=props.navigation;
导航(“第2页”);
}}>
开始
)
}
出口默认值欢迎;

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

  • App.js-->我认为您正在使用redux thunk产生副作用(api调用),但您没有将thunk连接到您的应用商店
更多文档

  • 我认为您的操作是正确的,但您的部分缺少一些代码
  • 你的减速器是正确的
  • 您的欢迎组件是功能组件,因此使用钩子代替映射动作和道具
const欢迎=(道具)=>{
常数导航选项=({
航行
}) => {
常数{
参数={}
}=导航状态;
}
//派遣行动
const dispatch=usedpatch();
const bookActions=bindActionCreators({
Getbook:Getbook
},派遣);
//选择器
const books=useSelector(state=>state.books);
返回(
{
const{navigate}=props.navigation;
导航(“第2页”);
}}>
开始
)
}
出口默认值欢迎;
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)
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(rootReducer, applyMiddleware(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;