是否可以在 redux 中使用嵌套的 reducer？

Question

给定一个带有 initialStore = { users :{} } 的应用程序，其中每个用户都通过其 id 作为键存储在 users 中，如果组件显示用户列表，则在更新此对象中的单个用户时，整个列表被重新呈现，这是预期的，因为 reducer 确实 return 一个新对象作为状态，尽管 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 return 每次需要更新单个用户时都会存储一个新用户，所以如果我想防止这种情况发生，我需要为每个用户配备一个 sub reducer .

但据我所知，redux store 需要是扁平的，reducers 只能按键切片，而不是按子键切片。

-您是否可以/并且正常/在 redux 中嵌套减速器？

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

Answer 1

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

您所描述的问题的标准方法是 规范化 您的状态，这样您就 "lookup tables" 每个项目都可以通过其 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 . In particular, the presentation High Performance Redux 详细介绍了这个主题。
最后，我一直在为 Redux 文档编写一组新页面，涵盖构建 reducer 的方法。当前的 WIP 位于 Structuring Reducers, and includes a section on Normalizing State Shape，还有许多其他相关主题。

是否可以在 redux 中使用嵌套的 reducer？

is it possible to have nested reducers in redux?

structure

reactjs

redux

react-redux