React Native Redux报错：Connect(Books)找不到store求助

Hey there! Let's sort out that Redux store error you're facing. The root issue here is your Redux Provider is only wrapping the Home component inside StartScreen, but your Books and Electronics screens are rendered directly via react-navigation's stack navigator—they're not part of the Provider's context tree. That's why the Connect(Books) component can't locate the store.

Here's how to fix this step by step:

1. Move the Redux Provider to the Top of Your App #

Wrap your entire navigation container with the Provider so every screen in your stack can access the store. Update your App.js like this:

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './src/shopping/Home';
import StartScreen from './src/shopping/StartScreen';
import BooksScreen from './src/shopping/Books';
import Electronics from './src/shopping/Electronics';
// Add these two imports
import { Provider } from 'react-redux';
import store from './src/shopping/store';

const AppNavigator = createStackNavigator(
  {
    Home: HomeScreen,
    Start: StartScreen,
    Elec: Electronics,
    Book: BooksScreen,
  },
  {
    initialRouteName: 'Start',
    defaultNavigationOptions: {
      headerTitle: 'Shopping App',
    },
  }
);

const AppContainer = createAppContainer(AppNavigator);

// Wrap the entire app container with Provider
export default function App() {
  return (
    <Provider store={store}>
      <AppContainer />
    </Provider>
  );
}

2. Remove Redundant Provider from StartScreen #

Now that the Provider is at the top, you don't need it in StartScreen anymore. Update StartScreen.js:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import Home from './Home';
// Remove these imports—they're no longer needed
// import store from './store'
// import { Provider } from 'react-redux';

class StartScreen extends Component {
  render() {
    return (
      <View>
        {/* Just render Home directly */}
        <Home navigation={this.props.navigation} />
      </View>
    );
  }
}

export default StartScreen;

3. Fix Action Type Mismatch in Reducer #

You've got a small bug in your reducer too: your dispatch uses type: "ADD_PRODUCTS" but the reducer listens for "ADD_ITEMS". Plus, you need to return a new state array to trigger Redux updates. Update reducer.js:

const items = (state = [], action) => {
  switch (action.type) {
    // Match the action type from your dispatch
    case "ADD_PRODUCTS":
      console.warn(action.payload);
      // Return a new array with the new item added
      return [...state, action.payload];
    // Always include a default case to return the original state
    default:
      return state;
  }
}

export default items;

Why This Works #

By placing the Provider at the very top of your app hierarchy, every screen in your react-navigation stack becomes a child of the Provider. This means all connected components (like Books and Electronics) can access the store through context, eliminating the "could not find store" error. The reducer fix ensures that when you dispatch actions, your store actually updates with the new product data.

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