2017-11-04 6 views
1

投稿とコメントを扱うアプリケーションでは、私の状態を平らで正規化された構造にできるだけ柔軟に保ちたい。具体的には、私はすべての投稿とコメントをキーと値のペアとして持ちます。ここで、キーは投稿またはコメントのIDで、値は投稿またはコメントです。つまり、私の状態は次のようになります。還元状態のビュー機能を含める

state = { 
    posts: new Map(), 
    comments: new Map() 
}, 

この状態構造は、ほとんどのレデューサーケースを簡略化します。

this.props.postsは、特定のコンポーネントの小道具にマッピングされたReduxの状態の投稿です
Array.from(this.props.posts.values()) 

:コンポーネントではしかし、私は繰り返し投稿やコメントの配列を取得するには、以下を行う必要があります。

リレーショナルデータベースのビューと同じように、最後のコードスニペットを状態に追加する方法はありますか?試しました

state = { 
    posts: new Map(), 
    comments: new Map(), 
    postArray:() => { return Array.from(posts.values()) } 
}, 

しかし、それは動作していないようです。

答えて

1

のReduxドキュメントのStructuring Reducersセクションを参照してください。

我々は、一般的な正規化された状態のセクションでは、などのような必要があることをお勧めします。

users : { 
    byId : {}, 
    allIds : [] 
} 

ます。また、店舗の状態からデータを導出するプロセスをカプセル化するためにmemoized "selector" functionsを使用する必要があります。

また、私は個人的には、Redux-ORM libraryをReduxストア内の正規化されたデータを管理するための抽象化レイヤーとして使用するという大きなファンです。私の"Practical Redux" tutorial seriesは、その使用方法を示しています。

Redux Reducers and Selectorsセクションのレデューサー、セレクター、正規化に関する追加記事へのリンクはReact/Redux links listです。

1

上位コンポーネントを使用してコンポーネントをラップし、追加の小道具を注入できます。これを簡潔な方法で行うには、recomposeライブラリからwithPropsを見ることをお勧めします。

関連する問題