是否可以在redux中嵌套reducer?
给出一个应用程序与initialStore = {用户:{}},其中每一个用户通过其ID存储在内部的用户作为密钥,如果组件示出的用户的列表,更新该对象内的单个用户的情况下,整个列表是重新这是预料之中的,因为减速器确实将新对象作为状态返回,尽管减速器实际需要的只是更改单个键。是否可以在redux中嵌套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:{}});
上面的是我调查问题的设定..现在给出使用连接到订阅简单阵营组件现在存储
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成两个分量puting里分割成单独的部件并且将其连接到终极版视图进行连接使
///LiComponent connect function example
const mapStateToProps(state,ownProps)=>({users:state.users[ownProps.key]});
但它现在既UL和Li重新呈现。所以它发生在我身上的问题是,我的减速机每次需要更新单个用户时都会返回一个新的用户存储,所以如果我想要防止发生这种情况,我需要为每个用户都有一个子减速器。
但是从我的理解终极版店需要将持平和减速器只有通过切片键,而不是子键。
-is可能/以及正常/你窝在减速终极版?
由正常我的意思是我看到吨周围的简单待办事项应用程序从来没有看到一个真正的世界大规模的应用程序结构,可以指导我们这样做,那么在规划应用程序时,如何做到这一点?
第一:是的,这是绝对有可能以各种方式巢减速功能。毕竟,它们只是功能,完全取决于你如何构建逻辑。
为您所描述的问题的标准方法是正常化你的状态,让你有“查找表”,其中每个项目可以通过其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文档开发一组新的页面,其中包括构造减速器的方法。目前的WIP位于Structuring Reducers,其中包括Normalizing State Shape部分以及其他一些相关主题。
但即使我将ID传递给连接的listItem,整个列表仍然会更新以响应列表状态更新后更新右侧内容中的项目吗? – Zalaboza
哦。所以你的意思是我应该在父组件中使用类似于'Object.keys(state.users)'的东西,以便下一次检查时,它具有相同的值,所以父代不会运行? !现在我明白你的意思是规范化,我在想'它是一个扁平的物体,我怎么能更正常化它:D!' – Zalaboza
通常,特定类型数据的标准化结构看起来像:{{users:{byId:{1:{},98:{},123:{}},items:[1,98,123]} ''。所以,你会有一个所有项目ID已经处于状态的数组。 – markerikson