能否在React应用中使用多Redux状态或自定义状态结构？

你提到的两种结构都可以实现，以下是具体代码示例：

结构一：拆分独立状态分支 #

这种结构是将顶层状态拆分为 state1 和 state2 两个独立分支，每个分支内部用 combineReducers 合并对应reducer。

import { combineReducers, createStore } from 'redux';

// 定义基础reducer逻辑
const reducer1 = (state = {}, action) => {
  switch(action.type) {
    case 'UPDATE_REDUCER1':
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

const reducer2 = (state = {}, action) => {
  switch(action.type) {
    case 'UPDATE_REDUCER2':
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

// 分别合并state1和state2的子reducer
const state1Reducer = combineReducers({ reducer1, reducer2 });
const state2Reducer = combineReducers({ reducer1, reducer2 });

// 顶层合并生成rootReducer
const rootReducer = combineReducers({ state1: state1Reducer, state2: state2Reducer });

// 创建store
const store = createStore(rootReducer);

注意：默认情况下，同一个action会触发所有同名reducer。如果需要区分state1和state2的更新，可以给action添加命名空间，比如'STATE1/UPDATE_REDUCER1'，在对应的reducer里只处理该命名空间的action。

结构二：嵌套通用reducer分支 #

这种结构是在顶层状态下创建两个通用reducer分支，每个分支内部包含多个子reducer，同样可以通过嵌套combineReducers或手动编写顶层reducer实现。

方式1：嵌套combineReducers #

import { combineReducers, createStore } from 'redux';

// 基础reducer逻辑同上
const reducer1 = (state = {}, action) => { /* ... */ };
const reducer2 = (state = {}, action) => { /* ... */ };
const reducer3 = (state = {}, action) => { /* ... */ };

// 合并每个通用reducer的子reducer
const generalReducer1 = combineReducers({ reducer1, reducer2, reducer3 });
const generalReducer2 = combineReducers({ reducer1, reducer2, reducer3 });

// 顶层合并
const rootReducer = combineReducers({ general1: generalReducer1, general2: generalReducer2 });

const store = createStore(rootReducer);

方式2：手动编写顶层reducer #

如果需要更灵活的控制，可以直接手动处理状态更新：

import { createStore } from 'redux';

// 基础reducer逻辑同上
const reducer1 = (state = {}, action) => { /* ... */ };
const reducer2 = (state = {}, action) => { /* ... */ };
const reducer3 = (state = {}, action) => { /* ... */ };

// 自定义顶层reducer
const rootReducer = (state = {
  general1: { reducer1: {}, reducer2: {}, reducer3: {} },
  general2: { reducer1: {}, reducer2: {}, reducer3: {} }
}, action) => {
  return {
    general1: {
      reducer1: reducer1(state.general1.reducer1, action),
      reducer2: reducer2(state.general1.reducer2, action),
      reducer3: reducer3(state.general1.reducer3, action)
    },
    general2: {
      reducer1: reducer1(state.general2.reducer1, action),
      reducer2: reducer2(state.general2.reducer2, action),
      reducer3: reducer3(state.general2.reducer3, action)
    }
  };
};

const store = createStore(rootReducer);

这两种方式都能实现你想要的状态结构，虽然不符合Redux推荐的扁平状态规范，但作为测试方案完全可行。

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