在“连接”的上下文或道具中找不到“商店”答案

【问题标题】：Could not find "store" in either the context or props of "Connect"在“连接”的上下文或道具中找不到“商店”
【发布时间】：2018-08-11 14:01:09
【问题描述】：

我已经使用 React Native 几年了，最近才需要在一个新的、更复杂的项目中使用 Redux。我目前正在学习一些教程，试图通过基础知识来学习。

我目前遇到以下错误：

Invariant Vilation: Could not find "store" in either the context of props of "Connect(App)"

我发现了许多帖子，其中包含有关此错误的信息，但由于我目前掌握的知识很少，我不确定如何正确实施修复。

这个项目是使用create-react-native-app 创建的，我正在使用 Expo 应用程序进行测试。

在我看来，这应该可行，因为 App 的根元素是 Provider 元素，将 store 作为道具传递，这似乎与错误所说的相矛盾。

configureStore.js

import { createStore, applyMiddleware } from 'redux';
import app from './reducers';
import thunk from 'redux-thunk';

export default function configureStore() {
  return createStore(app, applyMiddleware(thunk));
}

App.js：

import React from 'react';
import { Text } from 'react-native';

import { Provider, connect } from 'react-redux';
import configureStore from './configureStore';
import fetchPeopleFromAPI from './actions';

const store = configureStore();

export class App extends React.Component {
  componentDidMount() {
    props.getPeople()
  }

  render() {
    const { people, isFetching } = props.people;

    return (
      <Provider store={store}>
        <Text>Hello</Text>
      </Provider>
    );
  }
}

function mapStateToProps(state) {
  return {
    people: state.people
  }
}

function mapDispatchToProps(dispatch) {
  return {
    getPeople: () => dispatch(fetchPeopleFromAPI())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

【问题讨论】：

标签： react-native redux

【解决方案1】：

您正在尝试访问 App 组件中的存储，甚至在它被传递之前。因此它无法找到store。

您需要制作一个单独的组件并使用react-redux 连接它，例如

<Provider store={store}>
   <ConnectedComponent />
</Provider>

...
class ConnectedComponent extends React.Component {
  componentDidMount () {
    this.props.getPeople()
  }

  render() {
   return (
     <View>
       <Text> ... </Text>
     </View>
   )
 }
}


function mapStateToProps(state) {
  return {
    people: state.people
  }
}

function mapDispatchToProps(dispatch) {
  return {
    getPeople: () => dispatch(fetchPeopleFromAPI())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ConnectedComponent);

【讨论】：