React-Redux中Provider使用数量及路由全局状态隔离问题

1. React-Redux中可以使用多少个Provider？ #

没有数量限制，你可以在应用里嵌套任意多个Provider组件。每个Provider会为其内部的后代组件提供对应的Redux store，当组件用useSelector或connect取状态时，会优先拿最近的父级Provider提供的store，外层的store会被忽略。

2. 能否在部分路由拆分全局状态，其他路由用独立状态？ #

可以这么做，但你当前的实现有问题，导致两个状态都没法正常用：
你在Profile路由里嵌套了Provider，这会让该路由下的所有子组件只能访问profileStore，外层的mainStore被完全覆盖——也就是说，子组件既拿不到mainStore的状态，要是profileStore的配置（比如reducer、中间件）有问题，也会出现无法使用的情况。

解决方法 #

推荐方案：用Redux Toolkit拆分单一store（符合Redux设计理念）

Redux官方推荐单一store设计，通过slice拆分不同模块的状态，而非创建多个独立store。你可以把profile相关状态作为mainStore的一个slice：

1. 在store.js中创建profile slice：

import { configureStore, createSlice } from '@reduxjs/toolkit';

// 定义profile模块的状态和reducer
const profileSlice = createSlice({
  name: 'profile',
  initialState: {
    // 你的profile初始状态，比如用户头像、账户信息等
  },
  reducers: {
    // 定义profile相关的状态修改逻辑，比如更新头像、修改账户状态
    updateAvatar: (state, action) => {
      state.avatar = action.payload;
    }
  }
});

// 把所有slice合并到主store
export const mainStore = configureStore({
  reducer: {
    // 其他业务模块的slice
    // user: userSlice.reducer,
    profile: profileSlice.reducer
  }
});

// 导出profile模块的action，供组件调用
export const { updateAvatar } = profileSlice.actions;

2. Profile路由不需要嵌套Provider，直接在子组件中获取对应状态：

// 比如在Header组件中
import { useSelector, useDispatch } from 'react-redux';
import { updateAvatar } from '../../app/store';

function Header() {
  // 从主store中取出profile模块的状态
  const { avatar, username } = useSelector(state => state.profile);
  const dispatch = useDispatch();

  return (
    <div className="profile-header">
      <img src={avatar} alt="用户头像" />
      <span>{username}</span>
      <button onClick={() => dispatch(updateAvatar('new-avatar-url'))}>更换头像</button>
    </div>
  );
}

这种方式不用嵌套Provider，既能拆分状态，又能随时访问全局的mainStore状态，是最省心的实现方式。

备选方案：保留多store，手动处理上下文（不推荐）

如果你一定要用多个独立store，得让子组件能同时拿到外层的mainStore和内层的profileStore，可以通过自定义Context传递外层store：

1. 创建自定义Context传递mainStore：

// src/app/MainStoreContext.js
import { createContext, useContext } from 'react';

export const MainStoreContext = createContext(null);

export function useMainStore() {
  return useContext(MainStoreContext);
}

2. 根入口处用这个Context包裹：

// 主入口代码修改
import { MainStoreContext } from './app/MainStoreContext';

ReactDOM.render(
  <MainStoreContext.Provider value={mainStore}>
    <Provider store={mainStore}>
      <App />
    </Provider>
  </MainStoreContext.Provider>,
  document.getElementById("root")
)

3. 在Profile的子组件中，按需获取两个store：

// 比如在Handlers组件中
import { useSelector, useDispatch } from 'react-redux';
import { useMainStore } from '../../app/MainStoreContext';

function Handlers() {
  // 获取内层profileStore的状态
  const profileState = useSelector(state => state);
  const profileDispatch = useDispatch();

  // 获取外层mainStore的状态和dispatch
  const mainStore = useMainStore();
  const mainState = mainStore.getState();
  const mainDispatch = mainStore.dispatch;

  // 逻辑处理
  return <div className="profile-handlers">{/* 内容 */}</div>;
}

但这种方式会增加代码复杂度，后期维护成本高，除非有特殊需求，否则不建议这么做。

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