Redux合并reducers后状态树嵌套：如何实现扁平化结构？

嘿，这个问题很常见，本质是对象展开运算符的使用细节没到位，咱们一步步理清楚：

问题根源 #

你之前的写法里，是把reducers作为一个单独的属性传给combineReducers的，所以Redux自然会把它包装成状态树里的reducers嵌套节点。而你需要的是把reducers对象里的所有键值对平铺到根层级，和form、apollo同级。

正确写法 #

你提到尝试过...reducers但没成功，大概率是写法细节出错了。正确的代码应该是这样的：

// 先合并你的业务子reducers
export const reducers = combineReducers({ 
  app: ..., 
  user: ..., 
  display:..., 
});

// 构建根reducer时，展开reducers的所有属性到根对象中
const rootReducer = combineReducers({ 
  form: formReducer, 
  apollo: apolloReducer, 
  ...reducers // 这里用展开运算符，把app、user、display直接放到根层级
});

为什么这样有效？ #

...reducers是ES6的对象展开语法，它会把reducers对象里的所有键值对（也就是app、user、display对应的reducer）直接“展开”到当前对象中，效果等同于手动写：

const rootReducer = combineReducers({ 
  form: formReducer, 
  apollo: apolloReducer, 
  app: reducers.app, 
  user: reducers.user, 
  display: reducers.display
});

这样生成的状态树就会完全符合你的预期：

{ 
  form: {...}, 
  apollo: {...}, 
  app: {...}, 
  user: {...}, 
  display: {...} 
}

如果之前用...reducers没生效，可以检查两个点：

• 是不是运行环境不支持ES6对象展开？如果是，需要配置Babel等转译工具
• 是不是reducers对象的定义有问题？比如有没有正确合并子reducer或导出

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