React Native接入Redux时Connect(Detailsscreen)找不到store错误如何解决

报错核心是被connect包裹的DetailsScreen上层组件树没有Redux的Provider提供的store上下文，你的问题出在入口配置错误：当前如果你的React Native项目默认入口为App.js，App组件没有被Provider包裹，内部渲染的DetailsScreen自然找不到store；如果入口是你写的index.js，则你没有渲染带导航的根组件App，而是单独渲染了DetailsScreen，和你写的导航逻辑不匹配。

1. 修改入口文件index.js #

将Provider包裹整个App根组件，让所有页面都能访问Redux store，修改后代码如下：

import { AppRegistry } from 'react-native';
import React from 'react';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';

import configureStore from './reducers/store';
// 导入根组件App而非单独的DetailsScreen
import App from './App';

const store = configureStore()

const RNRedux = () => (
  <Provider store={store}>
    <App />
  </Provider>
)

AppRegistry.registerComponent(appName, () => RNRedux);

2. 修复App.js里的拼写错误 #

你写的NavigationDrawerStructure组件里存在两处错误：属性名大小写错误、toggle拼写错误，修正后代码如下：

const NavigationDrawerStructure = (props) => {
  // 修正拼写：toogle -> toggle
  const toggleDrawer = () => {
    // 修正属性大小写：NavigationProps -> navigationProps
    props.navigationProps.toggleDrawer();
  };

  return (
    <View style={{ flexDirection: 'row' }}>
      <TouchableOpacity onPress={() => toggleDrawer()}>
        <Image
          source={{
            uri:
              'https://raw.githubusercontent.com/AboutReact/sampleresource/master/drawerWhite.png',
          }}
        // style={{ width: 25, height: 25, marginLeft: 5 }}
        />
      </TouchableOpacity>
    </View>
  );
};

可选优化 #

DetailsScreen组件state里的places字段没有用到，所有列表数据已经通过Redux的this.props.places获取，可以删掉state里的冗余字段。

内容的提问来源于stack exchange，提问作者kathir