Injector报错：Store 'x'不可用，请求指导修复方案

Hey there! Let's sort out that "Store 'x' is not available" error you're hitting. This issue almost always boils down to components trying to access the Redux store not being wrapped by React Redux's Provider component. Let's walk through the fixes based on common pitfalls with your setup:

1. Wrap your entire app with the Provider in App.js #

First, make sure your root App component wraps all components that need access to the store (including your AppDrawer and Home page) with the Provider. Here's how that should look:

// App.js
import { Provider } from 'react-redux';
import store from './store/index';
import AppDrawer from './path/to/your/AppDrawer';

function App() {
  return (
    // Critical: Provider must wrap every component that uses the store
    <Provider store={store}>
      <AppDrawer />
      {/* Or your routing setup if you use React Router/Navigation */}
    </Provider>
  );
}

export default App;

A common mistake is wrapping only part of the app (like just the Home component itself) instead of the entire root tree—this leaves higher-level components (like your AppDrawer) outside the store's scope.

2. Verify your AppDrawer structure #

If your AppDrawer acts as a navigation container (like a drawer navigator in React Navigation), double-check that all its child screens (including the Home page) are nested inside the Provider. Never wrap the Provider inside the AppDrawer or Home component—always keep it at the top level of your app.

3. Confirm your store is correctly exported and configured #

Open your /store/index.js and make sure you're creating and exporting the store properly, with the 'x' reducer registered:

// /store/index.js
import { configureStore } from '@reduxjs/toolkit'; // Use createStore if you're on legacy Redux
import xReducer from './path/to/your/xReducer'; // Replace with your actual reducer file

const store = configureStore({
  reducer: {
    x: xReducer, // This 'x' matches the name in your error—must be present here!
    // Add other reducers if you have them
  },
});

export default store;

If the 'x' reducer isn't registered in the store's root reducer, even a correctly wrapped Provider won't let your components access that slice of state.

4. Check how your Home component accesses the store #

Make sure you're using useSelector or connect correctly to pull state from the store:

• For functional components with hooks:

  import { useSelector } from 'react-redux';
  
  function Home() {
    // Match the 'x' key you registered in the store
    const xState = useSelector(state => state.x);
    // Rest of your component logic
  }
  

• For class components with connect:

  import { connect } from 'react-redux';
  
  class Home extends Component {
    // ...
  }
  
  const mapStateToProps = state => ({
    x: state.x // Again, matches the store's reducer key
  });
  
  export default connect(mapStateToProps)(Home);
  

Most of the time, fixing the Provider wrapping at the root level will resolve this error. If you still run into issues, double-check that your store's reducer registration matches the 'x' name referenced in your error and component code.

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