Redux-純粋な機能

関数は、引数と呼ばれる入力を受け取り、戻り値と呼ばれる出力を生成するプロセスです。関数は、次の規則に従っている場合、純粋と呼ばれます-

関数は、同じ引数に対して同じ結果を返します。
その評価には副作用はありません。つまり、入力データを変更しません。
ローカル変数とグローバル変数の突然変異はありません。 *グローバル変数のような外部状態に依存しません。

関数への入力として渡された値の2回を返す関数の例を見てみましょう。一般的に、f（x）⇒ x* 2と記述されます。引数値2で関数が呼び出された場合、出力は4、f（2）⇒ 4になります。

以下に示すようにJavaScriptで関数の定義を書きましょう-

const double = x => x*2;//es6 arrow function
console.log(double(2)); //4

ここで、doubleは純関数です。

Reduxの3つの原則に従って、純粋な機能、つまりReduxのレデューサーによって変更を行う必要があります。ここで、減速機が純粋な関数でなければならない理由について疑問が生じます。

タイプが 'ADD_TO_CART_SUCCESS' のアクションをディスパッチして、[カートに追加]ボタンをクリックしてアイテムをショッピングカートアプリケーションに追加するとします。

減速機が以下に示すようにカートにアイテムを追加していると仮定しましょう-

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => {//es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         state.isAddedToCart = !state.isAddedToCart;//original object altered
         return state;
      default:
         return state;
   }
}
export default addToCartReducer ;

*isAddedToCart* は状態オブジェクトのプロパティであり、ブール値 *'trueまたはfalse'* を返すことにより、アイテムの「カートに追加」ボタンを無効にするタイミングを決定できます。 これにより、ユーザーは同じ製品を複数回追加できなくなります。 これで、新しいオブジェクトを返す代わりに、上記のような状態でisAddedToCartプロパティを変更しています。 ここで、アイテムをカートに追加しようとしても、何も起こりません。 [カートに追加]ボタンは無効になりません。

この動作の理由は次のとおりです-

Reduxは、両方のオブジェクトのメモリ位置によって古いオブジェクトと新しいオブジェクトを比較します。変更が発生すると、reducerからの新しいオブジェクトが必要です。また、変更が発生しない場合は、古いオブジェクトを取得することも想定しています。この場合、同じです。このため、Reduxは何も発生していないと想定しています。

そのため、レデューサーはReduxの純粋な関数である必要があります。以下は、突然変異なしでそれを書く方法です-

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => {//es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         return {
            ...state,
            isAddedToCart: !state.isAddedToCart
         }
      default:
         return state;
   }
}
export default addToCartReducer;

Redux-pure-functions

Redux-純粋な機能