Javascriptを - 不純な機能対ピュア

MuhammadUmarFarooq：

私は2つのようなの定義を経ています

純粋関数は、その入力を変更しようとすると、常に同じ入力に対して同じ結果を返さないものです。

例

function sum(a, b) {
  return a + b;
}

そして、不純な機能は、独自の入力を変更するものです。

例

function withdraw(account, amount) {
  account.total -= amount;
}

ReactJsから取られた定義とコードスニペット公式ドキュメント。

さて、缶誰かが私はいくつかのミス作ることができるか、を教えてリアクト/ Reduxのを純粋な機能が必要とされている不純な機能を使用するには、？

UTSAVパテル：

反応し、Redux不変性と相まって、両方の必要性純粋関数は、予測可能な方法で実行します。

あなたはこれら二つのことに従わない場合は、あなたのアプリケーションは、バグを持っている最も一般的なものになるReact/Redux変更を追跡することはできないとの再描画時にできないstate/prop変更。

リアクトの面では、次の例を考えてみます。

let state = {
    add: 0,
}

function render() {
    //...
}
//pure function
function effects(state,action) {
//following immutability while updating state, not directly mutating the state.
    if(action == 'addTen') {
        return {...state, add: state.add + 10} 
    }
    return state;
}

function shouldUpdate(s) {
    if(s === state){
        return false
    }
    return true
}

state = effects(state, 'addTen')if(shouldUpdate(state)) {
    render();
}

状態のみ添加性質を有する状態オブジェクトによって保持されています。このアプリは、アプリのプロパティをレンダリングします。これは、何が起こったときに、常に状態をレンダリングするべきではありませんが、変更は状態オブジェクトで発生したかどうかを確認する必要があります。

これと同じように、私たちは、エフェクト機能、持っているpure function私達は私達の状態に影響を与えるために使用します。あなたは状態が変更されるべきであり、何も変更が必要とされていないときと同じ状態に戻ったとき、それは新しい状態を返すことがわかります。

我々はまた、持っているshouldUpdateチェックが古い状態と新しい状態は同じであるかどうか===演算子を使用して機能します。

面でミスが反応にするには、実際には次の操作を実行できます。

function effects(state,action) {

  doRandom(); // effects should only be called for updating state.
             // Doing any other stuff here would make effects impure.

    if(action == 'addTen') {
        return {...state, add: state.add + 10}
    }
    return state;
}

あなたはまた、直接状態を設定し、使用しないでミスをすることができますeffects機能を。

function doMistake(newValue) {
    this.state = newValue
}

上記が行われるべきではない唯一effectsの機能は、状態を更新するために使用されるべきです。

リアクトの面では、我々は呼んeffectsとしてsetState。

Reduxの場合：

ReduxののcombineReducers参照、変更するためのユーティリティをチェックします。
反応-Reduxののconnect方法は、チェック基準からルート状態と戻り値の両方のために変化する成分を生成mapState包ま成分が実際に再レンダリングする必要があるかどうかを確認するために機能します。
タイムトラベルのデバッグは、減速機があることが必要ですpure functionsあなたが正しく異なる状態間をジャンプすることができるように副作用なしで。

あなたは簡単にレデューサーとして不純な機能を使って、3上記に違反することができます。

Reduxのドキュメントから直接取得され、次のとおりです。

それはあなたがに渡す関数の型ですので、それは減速と呼ばれていますArray.prototype.reduce(reducer, ?initialValue)。
それは減速が純粋なままということが非常に重要です。あなたが減速の内側にやるべきではありませんもの：

Mutate its arguments;
Perform side effects like API calls and routing transitions;
Call non-pure functions, e.g. Date.now() or Math.random().

同じ引数を考えると、それは次の状態を計算し、それを返す必要があります。驚く様な事じゃない。副作用はありません。いいえAPI呼び出しません。いいえ変異ません。ただ、計算。