2017-05-04 3 views
1

たとえば、ログイン・レデューサーとユーザー・アイコン・レデューサーがある場合。私がログインすると、ユーザーの情報を保存するだけでなく、ユーザーのアイコンを更新する必要があります。Reduxレデューサー間のアクションの共有と複数のアクションのトリガー

最初に、USER_LOGINアクションをエクスポートし、ログイン・レデューサーとユーザー・アイコン・リデューサーの両方にUSER_LOGINアクションを処理させることです。

第2のアプローチは、アクションとレデューサーの間に1対1のマッピングを持たせることです(アクションの1つのタイプは1つのレデューサーのみに属します)。ログイン・レデューサーはUSER_LOGINを処理し、Saga/Thunkではユーザー・アイコン・レデューサーに副作用UPDATE_USER_ICONをディスパッチします。

どちらが良い方法ですか?私は個人的に第2のアプローチに賛成です。

+1

答えをダウングレードしている間にコメントを追加することを忘れないでください。 – alpeshpandya

答えて

1

Redux FAQ entry on dispatching multiple actionsを引用:

あなたがあなたの行動を構造化する方法に関する特別なルールはありません。 Redux Thunkのような非同期ミドルウェアを使用すると、複数の異なるが関連するアクションを一列にディスパッチする、AJAXリクエストの進行を表すアクションをディスパッチする、状態に基づいてアクションを条件付きでディスパッチする、またはアクションをディスパッチして、その後。

一般的に、これらのアクションが関連していても独立しているか、実際には1つのアクションとして表現されるべきかどうかを尋ねます。自分の状況に合ったものを作ってください。しかし、減速機の可読性と行動ログの読みやすさとのバランスを取ろうとします。例えば、新しい状態ツリー全体を含むアクションは、あなたのレデューサーを1ライナーにしますが、今や、変化が起こっている理由の歴史がないので、デバッグは本当に困難になります。一方、ループ内でアクションを発生させて細分化している場合は、別の方法で処理される新しいアクションタイプを導入したいという兆候です。

パフォーマンスが懸念される場所で連続して複数回ディスパッチすることを避けてください。ディスパッチをバッチアップすることができる多くのアドオンとアプローチがあります。

1

私は、あなたの最初のアプローチが優れていると私は一般的に使用されていると言います。はい、複数のレデューサーが同じアクションタイプで動作しているときに、コードの可読性に影響を与える可能性がありますが、コードをあまり冗長にしないでください(これはリアクションエコシステムの主な不満です)。ログインのようなアクションはパフォーマンスに大きな影響を与えませんが、ユーザーアクションでAPI呼び出しを行うときは、複数のレデューサーで同じアクションタイプを処理するだけです。読みやすくするために、私はコメントとドキュメントを追加します。

0

本当にユーザーアイコンをReduxに保存する必要はありますか?この場合のより良いアプローチは、ログインしたユーザーに基づいてアイコンを返すセレクタを持つことです。そうすれば、店舗内の状態を最小限に保つことができます。

Reselectライブラリを使用してセレクタをキャッシュすることができます。

関連する問題