Javascript 提供程序无法访问redux存储
我尝试从组件访问redux存储的状态已经有一段时间了,我一直都会遇到这个错误。我已经学习了多个教程,介绍了如何正确地将组件连接到redux应用商店,但运气不好。下面是我的组件、redux配置和错误消息的片段 错误消息 不变冲突:在“连接(主屏幕)”的上下文或道具中找不到“存储”:请在中包装根组件,或将“存储”作为道具显式传递给“连接(主屏幕)”。 此错误位于: 在连接中(主屏幕)(位于Navigation.js:51) 下面是减速器Javascript 提供程序无法访问redux存储,javascript,reactjs,react-native,redux,Javascript,Reactjs,React Native,Redux,我尝试从组件访问redux存储的状态已经有一段时间了,我一直都会遇到这个错误。我已经学习了多个教程,介绍了如何正确地将组件连接到redux应用商店,但运气不好。下面是我的组件、redux配置和错误消息的片段 错误消息 不变冲突:在“连接(主屏幕)”的上下文或道具中找不到“存储”:请在中包装根组件,或将“存储”作为道具显式传递给“连接(主屏幕)”。 此错误位于: 在连接中(主屏幕)(位于Navigation.js:51) 下面是减速器 import {SHOW_ITEMS} from "../Ac
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)
不确定这是否是问题所在,但在导出默认主屏幕中,您应该有
导出默认连接(mapStateToProps,null)(主屏幕)
否则它会给你一个错误
null将取代mapDispatchToProps,因为即使您没有它,connect也会查找它。问题出在您的
App.js
文件中。您没有在App.js
文件中导出任何默认值,因此您实际上是在围绕某个未定义的文件包装提供程序
我不熟悉如何使用react native navigation
,就像你现在使用它一样。但是快速查看一下你正在做的事情,你需要导出默认导航;
在你的App.js
文件的末尾。App.js中有什么?你可能在App.js中导入了这个组件ode>?如果没有,我想它不会工作是的,我确实在我的app.js中导入了它。请查看我刚刚在app.js文件中添加到代码段的编辑。谢谢Jacob,但我以前尝试过。如果mapDispatchToProps是唯一调用的参数,我认为“null”参数通常会传递给connect函数,因为它是func的第二个本机参数注意。@JacobmapDispatchToProps
的第二个参数是可选的,不会引发错误。哦,非常感谢Barry让我注意到该文件。我发现丢失了很多导入。让我立即更新该文件。终于通过了该错误!呸!很遗憾,我现在只欢迎另一个。s之后成功更新该文件后,即使我将startSingleScreen导航函数导出为默认值,我仍会出现以下错误。“ExceptionManager.js:71未处理的js异常:不变冲突:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:object。“可能您只需要导出默认导航。startSingleScreenApp({…});
而不是导出默认值()=>Navi…
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)
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",
}
})