是否可以在 redux 中使用嵌套减速器？

Question

给定一个具有 initialStore = { users :{} } 的应用程序，其中每个用户都通过其 id 作为键存储在 users 内部，如果组件显示用户列表，则在更新此对象内的单个用户时，整个列表是重新渲染这是意料之中的，因为 reducer 确实返回了一个新对象作为状态，尽管 reducer 实际需要的只是更改单个键。

示例代码

ducks/users.js
const LoadAllAction = ()=>({ type:'USERS/LOAD',users:{1:{id:1,if:0},2:{id:2,if:0}} });
const LoadSingleAction = ()=>({ type:'USERS/SINGLE',user:{id:2,if:1} });

//THIS REDUCER HANDLE THE USERS SLICE OF STORE
const reducer = (state={},action)=>{

if(action.type === 'USERS/LOAD')return action.users;

if(action.type === 'USERS/SINGLE')return Object.assign({},state,{[action.user.id]:action.user});

return state;
}

const rootReducer = combineReducers({users:reducer});
const store = createStore(rootReducer, {users:{}});

上面是我正在调查的问题的设置。现在给出一个简单的 React 组件，它使用 connect 来订阅商店

const UsersPage = props=>(
    <ul> 
         {Object.keys(props.users).map((u)=>(
           <li key={u.id}>ID :: {u.id}</li>
         ))}
    </ul>
  );

const mapStateToProps(state)=>({users:state.users});

const component = connect(mapStateToProps)(UsersPage);

现在在上面的组件中，如果单个用户更改用户存储，整个 usersPage 组件将重新渲染。

鉴于用户商店可以容纳超过 10,000 个用户。我如何升级我的 reducers/redux 结构，以便在更新用户存储中的单个用户时..只有侦听此单个用户的组件重新渲染？

我尝试将上面的 ul 拆分为两个组件，将 li 放入单独的组件中，并将其连接到 redux 视图 connect 通过

///LiComponent connect function example
const mapStateToProps(state,ownProps)=>({users:state.users[ownProps.key]});

现在 ul 和 li 都重新渲染了。所以我突然想到问题是我的减速器每次需要更新单个用户时都会返回一个新用户存储，所以如果我想防止这种情况发生，我需要为每个用户都有一个子减速器。

但据我了解，redux 存储需要是扁平的，reducers 只能按键切片，而不是按子键。

-你有可能/和正常/在 redux 中嵌套 reducers 吗？

正常情况下，我的意思是我看到大量简单的 todos 应用程序，但从未见过可以指导我们摆脱这种情况的真实世界大型应用程序结构，那么 redux 大师在规划应用程序时是如何做到这一点的呢？

Answer 1

首先：是的，绝对有可能以各种方式嵌套 reducer 函数。毕竟，它们只是函数，完全取决于您要如何构建该逻辑。

您所描述的问题的标准方法是规范化您的状态，以便您拥有“查找表”，其中每个项目都可以通过其 ID 查找，ID 数组代表所有项目。然后将连接父列表，检索一组 ID，并将一个 ID 传递给每个子列表项。每个列表项组件都将被连接，接收其项目 ID 作为道具，并使用它在 mapState 中查找自己的项目。

我有许多描述这些类型方法的链接：

• 首先，我描述了这个确切场景的聊天记录：https://gist.github.com/markerikson/53735e4eb151bc228d6685eab00f5f85
• 其次，我收集的关于 Redux 性能优化的文章链接：https://github.com/markerikson/react-redux-links/blob/master/react-performance.md#redux-performance。特别是，High Performance Redux 的演示文稿详细介绍了该主题。
• 最后，我一直在为 Redux 文档编写一组新页面，其中涵盖了构建 reducer 的方法。当前的 WIP 位于 Structuring Reducers，其中包括一个关于 Normalizing State Shape 的部分，以及许多其他相关主题。