Redux异步与同步Reducer合并及单Store配置问题求助

错误原因 #

你遇到的Redux错误#12，本质是手动传入的初始状态结构与combineReducers合并后的reducer结构不匹配。合并后的reducer要求store状态包含所有合并reducer对应的键，而你之前只传入了ProductListReducer的状态，缺少CartReducer对应的部分，导致结构校验失败。

正确实现步骤 #

1. 正确合并两个Reducer

首先在./reducers/main.js中，用combineReducers把两个reducer合并成根reducer，建议使用语义化键名（比直接用reducer类名更易维护）：

import { combineReducers } from 'redux';
import { ProductListReducer, CartReducer } from './reducers';

// 合并reducer，键名对应store状态中的子节点名称
const rootReducer = combineReducers({
  productList: ProductListReducer,
  cart: CartReducer
});

export default rootReducer;

2. 构建匹配的初始状态

创建包含两个reducer对应初始状态的对象，键名必须和combineReducers中的键完全一致：

import reducer from './reducers/main';
import { InitialProductListStates, InitialCartListStates } from './reducers/reducers';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// 初始状态结构和合并后的reducer完全对应
const initialStates = {
  productList: InitialProductListStates,
  cart: InitialCartListStates
};

// 传入合并后的根reducer、完整初始状态和中间件
export const store = createStore(reducer, initialStates, applyMiddleware(thunk));

关键注意点 #

• 合并reducer时的键名，必须和初始状态中的键名完全一致，Redux会通过这些键分配对应reducer处理的状态片段
• 如果不需要手动传入初始状态，Redux会自动使用每个reducer自身的初始值；但如果手动传入，必须覆盖所有合并reducer对应的状态部分
• 用语义化键名（比如productList）代替reducer类名，能让状态结构更清晰直观

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