Question

给出一个带有initialStore = {users：{}}的应用程序，其中每个用户都以id作为键存储在用户内部，如果组件显示用户列表，则在更新此对象内的单个用户时，整个列表为重新渲染，这是预期的，因为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以上的用户。如何升级我的reducer / redux结构，以便在更新用户存储区内的单个用户时...只有侦听此单个用户的组件才会重新渲染？

我试图将上面的ul分成两个组件，将li放入单独的组件并将其连接到redux视图连接传递

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

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

但据我所知，redux store需要是flat，而reducers只能按键切换，而不是按子键切换。

- 你可以/ AND NORMAL /将reducer嵌套在redux中吗？

按照惯例，我的意思是我看到大量的简单todos应用程序，从未看到真正的世界大型应用程序结构可以引导我们走出这一点，那么redux大师如何做到这一点同时刨那些应用程序？

Answer 1

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

您要描述的问题的标准方法是规范化您的州，以便您拥有＆＃34;查找表＆＃34;其中每个项目可以通过其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部分以及其他一些相关主题。

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

1 个答案: