React Native配置Redux时出现Invariant Error：无法找到Store

Hey there, I feel your pain—spending days wrestling with Redux config only to hit that stubborn invariant error is the worst. Let’s break down the most common fixes for this issue, starting with the red flag I spotted in your code snippet.

First: You’re using react-dom in React Native—stop that! #

Looking at your code, you imported render from react-dom:

import { render } from 'react-dom'

React Native doesn’t use react-dom—it uses AppRegistry to register your root component. This is probably one of the main reasons your store isn’t being picked up. Here’s how to fix that:

Correct Root Component Setup #

import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './path/to/your/rootReducer'; // Make sure this exists!
import App from './App';
import { AppRegistry } from 'react-native'; // This is what React Native uses

// 1. Create your store properly
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

// 2. Wrap your entire App in Provider
const ReduxWrappedApp = () => (
  <Provider store={store}> {/* Critical: Pass the store here */}
    <App />
  </Provider>
);

// 3. Register the wrapped component with React Native
AppRegistry.registerComponent('YourAppName', () => ReduxWrappedApp);

Other Common Issues to Check #

• Ensure all connected components are inside the Provider
  Any component using connect(mapStateToProps, mapDispatchToProps) must be a descendant of the <Provider> component. If you have a component outside of this wrapper, it won’t be able to access the store.

• Double-check your store is being passed to Provider
  Typos happen! Make sure you’re passing store={store} (lowercase store) to the Provider prop—no misspellings like Store or missing the prop entirely. You can add console.log(store) right after creating it to confirm it’s a valid Redux store object.

• Verify your root reducer is correctly structured
  If your root reducer has errors (like missing combineReducers or invalid syntax), your store won’t initialize properly. Here’s a quick example of a valid root reducer:

  // rootReducer.js
  import { combineReducers } from 'redux';
  import authReducer from './authReducer';
  import postsReducer from './postsReducer';
  
  export default combineReducers({
    auth: authReducer,
    posts: postsReducer
  });
  

• Confirm dependency versions are compatible
  Make sure you have the right versions of redux, react-redux, and redux-thunk installed for your React Native version. Run npm list redux react-redux to check, and update if needed (but be cautious with major version jumps!).

Final Quick Test #

If you’ve made these changes and still see the error, try wrapping a simple test component in connect and placing it directly inside the Provider to rule out deeper component hierarchy issues. For example:

const TestComponent = connect(state => ({ test: state }))(() => <Text>Test</Text>);

// Inside ReduxWrappedApp:
<Provider store={store}>
  <TestComponent />
</Provider>

If this works, the issue is likely in a nested component not being properly connected or sitting outside the Provider tree.

Hope this gets you past that error—you’re almost there!

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