reactjs - 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 view connect 并传递

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

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

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

-是否有可能/并且正常/在 redux 中嵌套 reducer ？

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

Answer 1

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

解决您所描述的问题的标准方法是标准化您的状态，以便您拥有“查找表”，其中每个项目都可以通过其 ID 进行查找，并且可以通过 ID 数组来查找代表所有项目。然后，父列表将被连接，检索 ID 数组，并将一个 ID 传递给每个子列表项。每个列表项组件都将被连接，接收其项目 ID 作为 Prop ，并使用它在 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 的部分，以及许多其他相关主题。