javascript - 提供者无法访问 redux store

Question

一段时间以来，我一直在尝试从一个组件访问我的 redux 存储的状态，但我一直收到这个错误。我遵循了多个关于如何将组件与 redux 存储正确连接的教程，但没有成功。以下是我的组件、redux 配置和错误消息的片段。

错误信息不变违规:找不到“store:在“Connect(HomeScreen)”的上下文或 props 中。要么将根组件包装在 中，要么将“store”作为 prop 显式传递给“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

下面是reducer

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",
}
})

Answer 1

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

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