提供商无法访问redux商店

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了提供商无法访问redux商店相关的知识，希望对你有一定的参考价值。

我一直试图从一个组件访问我的redux商店的状态一段时间，我一直在不断收到这个错误。我已经关注了如何正确连接组件和redux存储的多个教程，但没有运气。下面是我的组件，redux配置和错误消息的片段。

错误消息不变违规：无法找到“存储：在”Connect（HomeScreen）“的上下文或道具中。要么将根组件包装在其中，要么将”store“显式传递为”Connect（Homescreen）“。此错误位于：在Connect（HomeScreen）中（在Navigation.js：51）

import { AppRegistry } from 'react-native';
import App from './App';
import {Provider} from "react-redux"
import configureStore from "./src/Store/configureStore"
import React from "react"

const store= configureStore()

const RNRedux= () => (
<Provider store={store}>
    <App/>
</Provider>
);



AppRegistry.registerComponent('Fluffy', () => RNRedux);

以下是配置商店

import {createStore, combineReducers} from "redux"
import homeReducer from "./Reducers/homeReducer"

const rootReducer= combineReducers({
    home: homeReducer
 })

const configureStore = () => {
   return createStore(rootReducer)
 }

export default configureStore

下面是减速机

import {SHOW_ITEMS} from "../Actions/actionTypes"

const initialState= {
cakes:[

    {
        id: 1,
        name:"Baked blur",
        image: require("../../Assets/bake-baked-blur-461279.jpg"),
        price: 40, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },

    {
        id: 2,
        name:"Blueberry Cake",
        image: require("../../Assets/bakery-baking-blueberries-291528.jpg"),
        price: 15, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },

    {
        id: 3,
        name:"Birthday Cake",
        image: require("../../Assets/baking-berry-birthday-357748.jpg"),
        price: 30, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },

    {
        id: 4,
        name:"Blackberry Cake",
        image: require("../../Assets/berries-berry-cake-434243.jpg"),
        price: 60, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },

    {
        id: 5,
        name:"Cheesecake",
        image: require("../../Assets/berries-cake-cheesecake-85766.jpg"),
        price: 70, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },

    {
        id: 6,
        name:"Blueberry Fudge",
        image: require("../../Assets/berry-blackberry-blueberry-315707.jpg"),
        price: 20, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },
     {
        id: 7,
        name:"Pancake",
        image: require("../../Assets/birthday-birthday-cake-cake-140831.jpg"),
        price: 70, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },
     {
        id: 8,
        name:"Vanilla Fudge",
        image: require("../../Assets/birthday-birthday-cake-cake-140831.jpg"),
        price: 70, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },
     {
        id: 9,
        name:"Strawberry Fudge",
        image: require("../../Assets/blur-cake-cheesecake-219293.jpg"),
        price: 70, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: ["maltesers","gummybears","mint","mentos","smarties"]
     },
     {
        id: 10,
        name:"Mango Slice",
        image: require("../../Assets/blur-cake-close-up-355290.jpg"),
        price: 70, 
        flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        size: ["14inches","12inches","10inches","8inches","6inches"], 
        toppings: 
    ["maltesers","gummybears","mint","mentos","smarties"]
     },

],

Customizables:[
    {
        Flavor:["chocolate", "strawberrry","vanilla", "Coffee"],
        Sizes: ["14inches","12inches","10inches","8inches","6inches"], 
        Toppings: ["maltesers","gummybears","mint","mentos","smarties"]

    }
]
}

const homeReducer = (state = initialState, action) => {
    switch(action.type){
        case SHOW_ITEMS:
        return {
            ...state
        }
        default:
        return state
    }


}

export default homeReducer

以下是连接到商店的组件

    import React, { Component } from 'react';
import {View, Text, Platform, Image, StyleSheet, ScrollView, Dimensions} from "react-native"
import { connect } from "react-redux"
import Icon from "react-native-vector-icons/Ionicons" 

import SpecialOffer from "../Components/homeScreenComp/SOS/specialOffers"
import initState from "../Store/LocalStore/local"
import ListItem from "../Components/homeScreenComp/listItem"
import Swiper from "../Components/homeScreenComp/specialSwiper"

 const Width = Dimensions.get("window").width


class HomeScreen extends Component {

  // state = initState

  selectionHandler = (key) => {
    // const custom = this.state.Customizables
    const selPlace = this.props.cakes.find(cakes => {
      return cakes.id === key
    })

    this.props.navigator.push({
      screen: "fluffy.OrderScreen",
      passProps:{
        selectedCake: selPlace,
     //   Customs: custom
      }
    })
  }


  static navigatorStyle = {
    navBarHidden: true,
    drawUnderNavBar: true,
    // navBarTranslucent: true
  };

  render() {


    return (
      <View style={styles.cover}>
      {/* HEADER */}
      <View style={styles.header}>
        <View>
          <Icon name={Platform.OS === "android"? "md-menu": "ios-menu"} size={30}/>
        </View>
        <View>
          <Text style={styles.text}>Fluffy Dreams</Text>
        </View>
        <View>
          <Icon name={Platform.OS === "android"? "md-notifications": "ios-notifications"} size={30}/>
        </View>
      </View>
      {/* SWIPER */}
      <ScrollView showsVerticalScrollIndicator={false}>

      <Swiper />
        {/* SPECIAL OFFERS */}
    <SpecialOffer Dimension={Width}/>

  {/* MARKET */}
  <View style={{flex: 1}}>
  <View style={{height: 50, width: Width, flexDirection: 'row', justifyContent: 'space-between', borderWidth: 2, borderColor: "black", marginTop: 10, alignItems: "center"}}>
    <View style={{padding: 5, marginLeft: 5,}}>
    <Text style={{ fontWeight: "bold"}}> MARKET</Text>
    </View>

    <View style={{padding: 5, marginRight: 5,}}>
    <Icon name={Platform.OS === "android"? "md-color-filter": "ios-color-filter"} size={30}/>
    </View>
  </View>

<ScrollView showsHorizontalScrollIndicator={false} overScrollMode="auto" contentContainerStyle={styles.itemWrapper}>
  {this.props.cakes.map((cakes, index) => (
      <ListItem onPress={this.selectionHandler} key ={index} cakes={cakes} />
    ))}
  </ScrollView>


  </View>

  </ScrollView>
  </View>

    )
  }
}


const styles= StyleSheet.create({

  cover:{
    flex: 1,

  },
  header:{
    backgroundColor:"red", 
    height: 70,
     width: "100%",
      flexDirection: 'row', 
      justifyContent: "space-between",
       alignItems: 'center',
      }
  ,
  text:{
    fontSize: 20,
    fontWeight: "bold",
  },

    itemWrapper:{
      alignItems: "center",
      flex: 1,
      width: Width-5 ,
      flexDirection: 'row',
      flexWrap: 'wrap',
      justifyContent: "center",

    }
  // OfferCarousel:{
  //   flex:3,
  //   flexDirection: 'row',
  //   //  backgroundColor: "yellow"
  // }
})

const mapStateToProps= state => {
  return{
    cakes: state.home.cakes
  }
}

export default connect(mapStateToProps)(HomeScreen)

App.js

import {Provider} from "react-redux"
import {Navigation} from "react-native-navigation"

import OnboardingScreen from "./src/screens/OnboardingScreen"
import HomeScreen from "./src/screens/HomeScreen"
import NewsScreen from "./src/screens/NewsScreen"
import ProfileScreen from "./src/screens/ProfileScreen"
import CartScreen from "./src/screens/CartScreen"
import ProfileInfoScreen from "./src/screens/ProfileInfoScreen"
import OrderScreen from "./src/screens/OrderScreen"
import configureStore from "./src/Store/configureStore"

const store = configureStore()

Navigation.registerComponent("fluffy.OnboardingScreen", ()=> OnboardingScreen,Provider,store)
Navigation.registerComponent("fluffy.HomeScreen",
 ()=>HomeScreen,
 store,
 Provider
 )
Navigation.registerComponent("fluffy.NewsScreen", ()=> NewsScreen,
store,
Provider)

Navigation.registerComponent("fluffy.ProfileScreen",
 ()=> ProfileScreen,
 Provider,
 store)

Navigation.registerComponent("fluffy.CartScreen",
 ()=> CartScreen,
 Provider,
 store)

Navigation.registerComponent("fluffy.ProfileInfoScreen", 
()=>ProfileInfoScreen,
Provider,
store)

Navigation.registerComponent("fluffy.OrderScreen", 
()=> OrderScreen,
Provider,
store)

 export default ()=> Navigation.startSingleScreenApp({
screen : {
  screen: "fluffy.OnboardingScreen",
}
})
答案

问题出在你的App.js文件中。您没有在App.js文件中导出任何默认值，因此您实际上是围绕某些undefined包装提供程序。

我不熟悉使用react-native-navigation就像你现在使用它的方式一样。但是如果你快速看看你正在做什么，你需要在你的export default Navigation;文件的末尾加上App.js。

另一答案

不确定这是否是问题，但在您的导出默认HomeScreen中，您应该有 export default connect(mapStateToProps, null)(HomeScreen)

否则它会给你一个错误。

null取代了mapDispatchToProps，因为即使你没有connect，connect也会查找它

以上是关于提供商无法访问redux商店的主要内容，如果未能解决你的问题，请参考以下文章

无法解析容器中的存储（React，Redux）

结合2个不同项目的2个redux商店

Reactjs：直接 Firebase 连接与 Firebase Redux 商店

无法将 Redux 商店连接到 React Typescript App

React演示组件无法使用反应容器从redux商店读取值

无法初始化商店的状态