React Native - не удалось найти «store» в контексте «Connect (DeckList)»

Question

Привет, парень, у меня проблема, я начинаю использовать React Native с Redux и получаю эту ошибку:

Нарушение инварианта: Нарушение инварианта: Не удалось найти «хранилище» в контекст "Connect (DeckList)". Либо оберните корневой компонент в или передать пользовательский поставщик контекста React и соответствующий потребитель контекста React для подключения (DeckList) в параметры подключения.

Я создал приложение Resact native с использованием expo, и я использую реагирующую навигацию версии 3.

Я хочу получить доступ к магазину в моем 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);

Answer 1

вам нужно создать магазин вне функции рендеринга:

const store = createStore(reducer);

export default function App() {

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