React Native - 在“Connect（DeckList）”的上下文中找不到“store”答案

【问题标题】：React Native - Could not find "store" in the context of "Connect(DeckList)"React Native - 在“Connect（DeckList）”的上下文中找不到“store”
【发布时间】：2019-07-03 11:19:18
【问题描述】：

嗨，伙计，我有一个问题，我开始将 React Native 与 Redux 一起使用，我收到了这个错误：

Invariant Violation：Invariant Violation：找不到“存储”在 “Connect(DeckList)”的上下文。要么将根组件包装在 a ，或将自定义的 React 上下文提供程序传递给以及对应的 React 上下文消费者到 Connect(DeckList) 中连接选项。

我使用 expo 制作了 react native 应用程序，我正在使用 react navigation v3。

我想访问我的 DeckList.js 中的商店。

这是我的 App.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import {
  createBottomTabNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";
import { white, purple } from "./utils/colors";
import { MaterialCommunityIcons, FontAwesome } from "@expo/vector-icons";

import DeckList from "./components/DeckList";
import AddDeck from "./components/AddDeck";
import DeckView from "./components/DeckView";
import { Provider, connect } from "react-redux";
import { createStore } from "redux";
import reducer from "./reducers";


export default function App() {
  const store = createStore(reducer);
  return (
    <Provider store={store}>
      <View style={styles.container}>
        {" "}
        <AppContainer />{" "}
      </View>
    </Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

const Home = createBottomTabNavigator({
  DeckList: {
    screen: DeckList,
    navigationOptions: {
      tabBarLabel: "Home",
      tabBarIcon: ({ tintColor }) => (
        <MaterialCommunityIcons name="cards" size={24} color={tintColor} />
      )
    }
  },
  AddDeck: {
    screen: AddDeck,
    navigationOptions: {
      tabBarLabel: "ADD",
      tabBarIcon: ({ tintColor }) => (
        <FontAwesome name="plus-square" size={24} color={tintColor} />
      )
    }
  }
});

const MainNavigator = createStackNavigator({
  DeckList: {
    screen: Home,
    navigationOptions: {
      tabBarLabel: "Home",
      tabBarIcon: ({ tintColor }) => (
        <MaterialCommunityIcons name="cards" size={24} color={tintColor} />
      )
    }
  },
  DeckView: {
    screen: DeckView,
    navigationOptions: {
      title: "Deck Indo",
      headerTinitColor: white,
      headerStyle: {
        backgroundColor: purple
      }
    }
  }
});
const AppContainer = createAppContainer(MainNavigator);

这里是 DeckList.js

import React, { Component } from "react";
import { StyleSheet, Text, View, Button } from "react-native";
import { getData } from "../utils/api";
import { connect } from "react-redux";

class DeckList extends Component {
  state = {};
  render() {
    const decks = getData();

    return (
      <View style={styles.container}>
        {Object.keys(decks).map((deck, i) => {
          const { title, questions } = decks[deck];
          return (
            <View key={i}>
              <Text>{title}</Text>
              <Text>{questions.length}</Text>
              <Button
                title="View Deck"
                onPress={() =>
                  this.props.navigation.navigate("DeckView", { entryId: deck })
                }
              />
            </View>
          );
        })}
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

const mapStateToProps = state => {
  return {
    decks: state
  };
};
export default connect(mapStateToProps)(DeckList);

【问题讨论】：

标签： redux react-navigation

【解决方案1】：

你需要在渲染函数之外创建 store：

const store = createStore(reducer);

export default function App() {

  return (
    <Provider store={store}>
      <View style={styles.container}>
        {" "}
        <AppContainer />{" "}
      </View>
    </Provider>
   );
}

【讨论】：