React Redux单个Store多Provider下组件状态同步问题求助

Hey there! Let's break down why your B component's reducer isn't triggering when A dispatches an action, and how to fix this state sync issue.

First, Fix the Invalid Store Setup #

Looking at your store.js code, the way you're using combineReducers is incorrect. The combineReducers function expects an object (where each key maps to a reducer, defining a slice of your state), not a list of reducers passed as separate arguments.

Your current code:

export const store = createStore(combineReducers(mainReducer, AReducer, BReducer));

This is invalid—Redux can't properly map your reducers to state slices this way, which means your BReducer might not even be hooked up to the store correctly. Here's the corrected version:

import { createStore, combineReducers } from 'redux';

export const store = createStore(combineReducers({
  main: mainReducer,  // Maps to `state.main` in your app
  a: AReducer,        // Maps to `state.a`
  b: BReducer         // Maps to `state.b`
}));

Ensure Your B Component Subscribes to the Correct State Slice #

Even with a fixed store, your B component won't react to state changes unless it's actively listening to the b slice managed by BReducer.

If you're using React-Redux hooks:

import { useSelector } from 'react-redux';

function B() {
  const bState = useSelector(state => state.b); // Subscribes to changes in `state.b`
  // ... rest of your component logic
}

If you're using the older connect HOC:

import { connect } from 'react-redux';

function B(props) {
  // Use `props.bState` in your component
}

const mapStateToProps = state => ({
  bState: state.b
});

export default connect(mapStateToProps)(B);

Verify Your Action Targets the BReducer #

Double-check that the action you dispatch from A has a type that your BReducer is configured to handle.

Example action and reducer:

// actions.js
export const updateBState = (newData) => ({
  type: 'UPDATE_B',
  payload: newData
});

// BReducer.js
const initialState = { /* your initial state here */ };

export default function BReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_B':
      return { ...state, ...action.payload }; // Properly updates the state slice
    default:
      return state;
  }
}

When A dispatches updateBState, the store will pass this action to all reducers—including BReducer. If the type matches, BReducer will update the state.b slice, and since B is subscribed to that slice, it'll re-render with the new state.

Confirm Both Providers Use the Exact Same Store Instance #

You mentioned both A.js and B.js import the same store from ./store, which is correct. Just make sure you're not accidentally creating a new store instance anywhere (like writing createStore(...) directly inside a Provider instead of importing the shared one).

Wrap-Up #

To recap, the key fixes are:

• Correct the combineReducers syntax to map reducers to state slices properly
• Ensure B component is subscribed to the b state slice
• Verify your action's type is handled by BReducer
• Confirm both Providers use the single shared store instance

Once you make these adjustments, dispatching the action from A will trigger BReducer, and B component will reflect the updated state.

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