Reduxパターンの 'set'アクションと 'add'/'remove'アクションの比較

Question

私は現在reduxでアプリケーションを作成しています。私は、私たちの行動の構造に関して質問をしました。私はそれを以下の基本的な例に分かります。私たちは不変のJSを使用しており、私たちのストアは不変のオブジェクトから構築されています。

ユーザーが配列内の項目をクリックすると、ストアに追加または削除されるinput要素があります。これを整理するには2つの基本的な方法があります。簡単にするために、のは、ストアが名前の単一のマップで構成されていると仮定しましょうこのような「名前=地図（）」マップは次のようになりますこと：

{ NAME1：真 名2：真 }

戦略1

は、単一のアクションを使用します：SET_SELECTED_NAMES

戦略2

SELECT_NAME、UNSELECT_NAMEの2つのアクションを使用します。

私はreduxの反応を理解し、戦略2から戦略1のコードを私のチームの要請でリファクタリングした後、私はこのリファクタリングから大量のコードの臭いがはっきりとしているが、それは、「次の状態」が何であるべきかを知るために、店舗から構成要素に移るべき論理を動かしているかのように感じる。

ユーザーがアイテムをクリックすると、コンポーネント内から現在の状態を調べ、そのクリックがアイテムを削除するか追加するかどうかを理解する必要があります。それから、私たちはストア/レデューサーを使ってそれを '計算'するのではなく、新しい状態をアクションに直接渡しています。これは、レデューサーを極めてシンプルにし、コンポーネント内のロジックを複雑にするか、少なくともそれほど冗長にしないという究極の効果をもたらします。

旋削：

isSelecting？ this.props.selectName（名）：this.props.unselectName（名）

の中へ：

this.props.setSelectedNames（this.props.selectedNames.update（名前、V => v）で！） ;

Answer 1

あなたはbusiness logicをアクションクリエイターとレデューサーの両方に自由に追加することができます。これは本当にセットアップと組織によって異なります。

個人的には、私は薄いレデューサーと脂肪のアクション作成者を好みます。

戦略番号1は、私が理解しているように、いくつかのロジックをチェックし、いくつかの計算の後、減速器が処理するためのペイロードを設定します。

私の意見では、これはちょうどうまくいくかもしれないし、レデューサーを非常にシンプルに保つだけで、状態を更新する責任があると思います。関心の

記事： http://redux.js.org/docs/faq/CodeStructure.html#structure-business-logic

PS： あなたはまた、いくつかのロジックに基づいて派遣他のアクションを送信するアクションを検討し、そしてその混合アプローチ（戦略1/2）を使用できます。

const setLocation = (id:number):ActionType => { 
    // check some logic here, and dispatch the right set of actions 
    return dispatch => { 
     dispatch(getWeather(id)) 
     dispatch(getForecastDaily(id)) 
     dispatch(getForecastHourly(id)) 
     } 
    }