Question

我已经使用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);

Answer 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);

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

1 个答案: