Question

在redux应用程序中，使用connect从状态获取数据是可行的方法。问题是我发现我的自我将组件与状态原子紧密耦合。如果我想改变状态树的结构，那么过去消耗这种状态的所有组件都会破坏。

那么如何解耦呢？

例如

initialState = {
 users: { ids:[1,2] , byId:{1:{name:'user 1'},2:{name:'user 2'} }
 posts: { ids:[1,2] , byId:{1:{title:'post 1'},2:{title:'post 1'} }
 access : {1:[1,2],2:[1,2]} //post_id : [user_id who can see post]
}

在这个简单的状态下，我描述了我有2个用户和2个帖子，这两个帖子对两个用户都可见..

在列出帖子和用户的组件中，连接可以是

render(){
let {posts,access,currentUser} = this.props;

let my_posts = posts.ids.map(post_id=>posts.byId[post_id])
                    .filter(post=>(access[post.id].indexOf(currentUser.id)>-1)
//above map will return posts, and filter will filterout posts user dont have access to.
}

connect( (state,prop)=>{currentUser:users[prop.user_id],posts,access})(Component);

<Component user_id={1} />

这里的问题是组件的渲染函数对状态进行大量操作以呈现正确的数据。如果我可以做像

这样的事情会好得多

render(){
let my_posts = Posts.ofUser(currentUser.id)
//now Posts should be a service that has access to state and return the needed data.
}

如何创建处理状态的Object，并公开组件和连接函数联系的API以获取信息。

我读过很多重新选择，但是如何实现呢？

Answer 1

将状态形状与组件分离的最简单方法是通过选择器查询任何状态道具。

它添加了一些样板代码，但一旦完成，您将在组件和应用程序状态之间获得完全可测试的桥梁。

要开始使用选择器，请查看Redux文档Computing derivated data页面。

重新选择只是一个创建记忆选择器的工具。

反应Redux如何构建应用程序以从状态原子解耦组件

1 个答案: