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.
}
状態を処理するようなオブジェクトを作成し、コンポーネントと接続機能が情報を得るために連絡する API を公開するにはどうすればよいですか。
私は再選択についてたくさん読みましたが、それを実装する方法は?