2

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 を公開するにはどうすればよいですか。

私は再選択についてたくさん読みましたが、それを実装する方法は?

4

1 に答える 1