Redux分层开发中如何简化状态访问？消除冗余self层级

这个问题我在项目里也碰到过，多层嵌套的state路径写起来不仅繁琐还容易出错，给你两个实用的解决思路：

一、调整Reducer结构，从根源简化State层级 #

目前你的parent_redux.js里用combineReducers把自身的parent_reducer和child_reducer包装成了self和child两个子节点，这才导致了state.parent.self.number的长路径。我们可以直接让parent的reducer同时管理自身状态和child的状态，去掉多余的self层级：

修改parent_redux.js如下：

import { createAction, handleActions } from 'redux-actions';
import child_reducer from './child_redux';

// 初始状态直接包含自身的number和child的初始状态
const initial_state = {
  number: 0,
  // 传入undefined和空action，获取child的初始状态
  child: child_reducer(undefined, {})
};

// 处理parent自身的action逻辑
const handleParentActions = handleActions({
  // 示例：处理parent的自增action
  ['INCREMENT_PARENT']: (state) => ({
    ...state,
    number: state.number + 1
  })
}, initial_state);

// 自定义reducer，同时更新parent自身和child的状态
export default (state = initial_state, action) => {
  // 先更新parent自身的状态
  const updatedParent = handleParentActions(state, action);
  // 再用child reducer更新child的状态
  return {
    ...updatedParent,
    child: child_reducer(updatedParent.child, action)
  };
};

修改后你的redux.js无需变动，现在访问状态就变成了：

• parent的number：state.parent.number
• child的number：state.parent.child.number

这种方法直接从state结构上消除了冗余的self层级，是最彻底的解决方案。

二、使用Selector封装状态访问路径（无需修改Reducer） #

如果不想改动现有reducer结构，或者项目已经有大量依赖旧路径的代码，可以用selector函数封装状态访问逻辑，后续组件里只需要调用selector，不用写长路径：

创建一个selectors.js文件：

// 封装parent number的访问
export const getParentNumber = (state) => state.parent.self.number;
// 封装child number的访问
export const getChildNumber = (state) => state.parent.child.number;

然后在组件里使用：

// 组件中获取状态
const parentNumber = useSelector(getParentNumber);
const childNumber = useSelector(getChildNumber);

这种方法不用修改现有reducer，而且如果后续state结构发生变化，只需要修改selector函数，所有使用该selector的组件都不用改动，维护性更好。

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