問題タブ [react-redux]

サーバーから次の形式で取得した映画に関するデータを表示するアプリを作成しているとします。

異なる配列は、ID を介して相互に関連付けられます。つまり、ムービー内のオブジェクトは次のようになります。

キャスト配列内のこれらの ID のそれぞれは、actors 配列内のアクターへの参照です。

データをそのまま redux ストアに配置しますが、さまざまなコンポーネントがさまざまな任意の方法でデータを使用する必要があります。たとえば、年の配列が俳優に直接リンクしていなくても、1 つのコンポーネントで 1970 年代にジャック ニコルソンが出演したすべての映画を一覧表示する必要があります。それ自体が俳優にリンクしている映画にリンクしているだけです。したがって、コンポーネントがレンダリングできるようになる前に、一連のデータ変換を実行する必要があります。

別のコンポーネントには、マーティン・スコセッシとロバート・ディネロが一緒に仕事をしたすべての時間がリストされ、別のコンポーネントには、タイトルに「火」が含まれるすべての映画がリストされ、別のコンポーネントには、1990年から2000年の間にトム・ハンクスが出演したすべての映画がリストされます...

プロダクト マネージャーは、このような任意の表示を常に追加および削除することを計画しているため、クエリ可能なデータベースのように、アプリ内で日付が使用されます。特定のクエリは頻繁に変更されます。

また、変換はクライアントで行う必要があるとしましょう。サーバーの唯一の機能は、上記の正規化された形式でデータを送信することです。

スケーラブルで簡単に更新できるように、このようなアプリを構築する最善の方法は何ですか? いくつかのアプローチを考えることができます：

1. レデューサーですべてのマッピングを行います。欠点は、レデューサーが肥大化することです。同じデータを大量の異なる形式でキャッシュする必要があります。

2. 生の正規化されたデータをレデューサーに保存し、コントローラー コンポーネント (高レベル コンポーネント) を使用して、子が必要とする形式にマップします。ビューにビジネスロジックが散らばっているので、私はこれに夢中ではありません。もちろん、これは高レベルのコンポーネントをビューと考えていることを前提としています。

3. connect、mapStateToProps 関数でマップします。各高レベル コンポーネントはストアに接続されますが、小道具を取得する前に、接続によって適切な形式に変換されます。

4. ????

react-router (path="profile/:username") によってロードされる Profile コンポーネントがあり、コンポーネント自体は次のようになります。

fetchUser アクションは次のようになります (redux-api-middleware):

componentWillReceiveProps 関数を追加した理由は、URL が別の :username に変更されたときに反応し、そのユーザーのプロファイル情報をロードするためです。一見するとすべてが機能しているように見えますが、デバッグ中に componentWillReceiveProps 関数が無限ループで呼び出されていることに気付きました。その理由はわかりません。componentWillReceiveProps を削除すると、プロファイルは新しいユーザー名で更新されませんが、ループの問題はありません。何か案は？

ターゲット オブジェクトに変更を適用するために Spread 演算子を使用するか、Reducer 関数で Object.assign を使用するか、少し混乱しました。

次に、上記のコードは Object.assign メソッドを使用しており、以下のコードはスプレッド演算子を使用しています

これらの両方で適切な方法はどれですか

React を react-router と react-redux で使用しています。コンポーネントがマウントされると、ディスパッチしてデータベースからデータを取得します。私の親コンポーネントにはこれがあります

私の子コンポーネントは次のようになります。

また、親コンポーネントのリンクをクリックして TopComp を更新します。異なる params.id を受け取り、それぞれのデータをフェッチします。

redux でストアの状態を維持するにはどうすればよいですか? ログインすると、ユーザーの詳細が としてストアに保存され{user:Object}ます。ただし、ページを更新すると、状態は失われ、初期値と等しくなります。どうすればこれを処理できますか? 状態を localStorage に保存する必要がありますか? 代替手段はありますか？

キー付き要素を子要素に送信すると、それらの子要素がキーでフィルタリングされます。キーによってハンドラーを子にマップするという考え方で、ハンドラーはキーを切り替えてフィルターを適用します。インデックスをキーとして使用することはアンチパターンであることは知っていますが、ここで何が起こっているのでしょうか? 私はいつもエラーが発生します"Warning: Each child in an array or iterator should have a unique "key" prop.

render: function() { return ( <Frame> <Frame> <Navbar isLoggedIn={true} handlers={this.handlers}> {this.props.children.map(function(child, i) { return ( <button onClick={this.handlers[i]}>{child.props.text || 'Checkout item ' + i}</button> ) }.bind(this))} </Navbar> </Frame> {this.props.isLoading ? <Loading /> : <Filter filter={function(child) { return String(this.props.displayed) === child.key; }.bind(this)}> {this.props.children.map(function(child, i) { return (<div key={i}><child /></div>) })} </Filter>} </Frame> ) }

function Filter (props) { return ( <div> {Array.isArray(props) ? props.children.filter(function(child) { return props.filter(child); }) : props.children} </div> ) };