イマーでより良いレデューサー

React開発者は、状態を直接変更してはならないという原則をすでに理解している必要があります。 あなたはそれが何を意味するのか疑問に思うかもしれません（私たちのほとんどは私たちが始めたときにその混乱を持っていました）。

このチュートリアルはそれを正当化します。不変の状態とは何か、そしてその必要性を理解するでしょう。 また、Immerを使用して不変の状態を操作する方法と、それを使用する利点についても学習します。 この記事のコードは、このGithubリポジトリにあります。

JavaScriptの不変性とそれが重要な理由

Immer.jsは、Michel Weststrateによって作成された小さなJavaScriptライブラリであり、その使命は、「不変の状態をより便利な方法で操作できるようにすること」です。

しかし、Immerに飛び込む前に、JavaScriptの不変性と、それがReactアプリケーションで重要である理由について簡単に復習しましょう。

最新のECMAScript（別名JavaScript）標準は、9つの組み込みデータ型を定義しています。 これらの9つのタイプのうち、 primitive値/タイプと呼ばれるものが6つあります。 これらの6つのプリミティブは、 undefined 、 number 、 string 、 boolean 、 bigint 、およびsymbolです。 JavaScriptのtypeof演算子を使用して簡単にチェックすると、これらのデータ型の型が明らかになります。

 console.log(typeof 5) // number console.log(typeof 'name') // string console.log(typeof (1 < 2)) // boolean console.log(typeof undefined) // undefined console.log(typeof Symbol('js')) // symbol console.log(typeof BigInt(900719925474)) // bigint

primitiveは、オブジェクトではなく、メソッドを持たない値です。 現在の議論で最も重要なのは、プリミティブの値は、一度作成されると変更できないという事実です。 したがって、プリミティブはimmutableであると言われます。

残りの3つのタイプは、 null 、 object 、およびfunctionです。 typeof演算子を使用してタイプを確認することもできます。

 console.log(typeof null) // object console.log(typeof [0, 1]) // object console.log(typeof {name: 'name'}) // object const f = () => ({}) console.log(typeof f) // function

これらのタイプはmutableです。 つまり、値は作成後いつでも変更できます。

なぜ私が配列[0, 1]をそこに持っているのか不思議に思うかもしれません。 そうですね、JavaScriptlandでは、配列は単に特殊なタイプのオブジェクトです。 nullと、それがundefinedとどのように違うのかについても疑問に思っている場合に備えて。 undefinedは、変数の値を設定していないことを意味しますが、 nullはオブジェクトの特殊なケースです。 何かがオブジェクトであるべきであることがわかっているが、オブジェクトがそこにない場合は、単にnullを返します。

簡単な例で説明するために、ブラウザコンソールで以下のコードを実行してみてください。

 console.log('aeiou'.match(/[x]/gi)) // null console.log('xyzabc'.match(/[x]/gi)) // [ 'x' ]

String.prototype.matchは、 objectタイプである配列を返す必要があります。 そのようなオブジェクトが見つからない場合は、 nullを返します。 undefinedを返すことは、ここでも意味がありません。

それで十分です。 不変性の説明に戻りましょう。

MDNドキュメントによると：

「オブジェクトを除くすべてのタイプは、不変の値（つまり、変更できない値）を定義します。」

このステートメントには、特殊なタイプのJavaScriptオブジェクトであるため、関数が含まれています。 ここで関数の定義を参照してください。

可変および不変のデータ型が実際に何を意味するかを簡単に見てみましょう。 ブラウザコンソールで以下のコードを実行してみてください。

 let a = 5; let b = a console.log(`a: ${a}; b: ${b}`) // a: 5; b: 5 b = 7 console.log(`a: ${a}; b: ${b}`) // a: 5; b: 7

私たちの結果は、 bがaから「派生」しaいる場合でも、 bの値を変更してもaの値には影響しないことを示しています。 これは、JavaScriptエンジンがステートメントb = aを実行すると、新しい別個のメモリ位置を作成し、そこに5を配置し、その位置にbを指すという事実から生じます。

オブジェクトはどうですか？ 以下のコードを検討してください。

 let c = { name: 'some name'} let d = c; console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"some name"}; d: {"name":"some name"} d.name = 'new name' console.log(`c: ${JSON.stringify(c)}; d: ${JSON.stringify(d)}`) // {"name":"new name"}; d: {"name":"new name"}

変数dを介してnameプロパティを変更すると、 cでも名前プロパティが変更されることがわかります。 これは、JavaScriptエンジンがステートメントc = { name: 'some name ' }を実行すると、JavaScriptエンジンがメモリ内にスペースを作成し、オブジェクトを内部に配置して、 cを指すという事実から生じます。 次に、ステートメントd = cを実行すると、JavaScriptエンジンはdを同じ場所にポイントします。 新しいメモリ位置は作成されません。 したがって、 dの項目への変更は、暗黙的にcの項目に対する操作です。 あまり努力しなくても、なぜこれが問題になるのかがわかります。

Reactアプリケーションを開発していて、変数cから読み取って、ユーザーの名前をsome nameとして表示したいとします。 しかし、他のどこかで、オブジェクトdを操作することによってコードにバグを導入しました。 これにより、ユーザーの名前がnew nameとして表示されます。 cとdがプリミティブであれば、その問題は発生しません。 しかし、プリミティブは、典型的なReactアプリケーションが維持しなければならない種類の状態には単純すぎます。

これは、アプリケーションで不変の状態を維持することが重要である主な理由です。 Immutable.js READMEのこの短いセクションを読んで、他のいくつかの考慮事項を確認することをお勧めします。不変性の場合です。

Reactアプリケーションで不変性が必要な理由を理解したので、Immerがそのproduce関数で問題にどのように取り組むかを見てみましょう。

イマーのproduce機能

ImmerのコアAPIは非常に小さく、使用する主な関数はproduce関数です。 produceは、初期状態と、状態を変更する方法を定義するコールバックを受け取るだけです。 コールバック自体は、意図されたすべての更新を行う状態のドラフト（同一ですが、それでもコピー）コピーを受け取ります。 最後に、すべての変更が適用された新しい不変の状態をproduceします。

この種の状態更新の一般的なパターンは次のとおりです。

 // produce signature produce(state, callback) => nextState

これが実際にどのように機能するかを見てみましょう。

 import produce from 'immer' const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], } // to add a new package const newPackage = { name: 'immer', installed: false } const nextState = produce(initState, draft => { draft.packages.push(newPackage) })

上記のコードでは、開始状態と、ミューテーションの発生方法を指定するコールバックを渡すだけです。 それはそれと同じくらい簡単です。 州の他の部分に触れる必要はありません。 initStateはそのままで、開始状態と新しい状態の間で触れなかった状態の部分を構造的に共有します。 私たちの州のそのような部分の1つは、 petsの配列です。 produce d nextStateは、変更した部分と変更しなかった部分を含む不変の状態ツリーです。

このシンプルでありながら有用な知識を武器に、 produceがReactレデューサーを簡素化するのにどのように役立つかを見てみましょう。

イマーでレデューサーを書く

以下に定義された状態オブジェクトがあるとします。

 const initState = { pets: ['dog', 'cat'], packages: [ { name: 'react', installed: true }, { name: 'redux', installed: true }, ], };

そして、新しいオブジェクトを追加し、次のステップで、 installedているキーをtrueに設定しました。

 const newPackage = { name: 'immer', installed: false };

JavaScriptオブジェクトと配列拡散構文を使用してこれを通常の方法で行う場合、状態リデューサーは次のようになります。

 const updateReducer = (state = initState, action) => { switch (action.type) { case 'ADD_PACKAGE': return { ...state, packages: [...state.packages, action.package], }; case 'UPDATE_INSTALLED': return { ...state, packages: state.packages.map(pack => pack.name === action.name ? { ...pack, installed: action.installed } : pack ), }; default: return state; } };

これは不必要に冗長であり、この比較的単純な状態オブジェクトと間違えやすいことがわかります。 また、状態のあらゆる部分に触れる必要がありますが、これは不要です。 Immerを使用してこれを単純化する方法を見てみましょう。

 const updateReducerWithProduce = (state = initState, action) => produce(state, draft => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'UPDATE_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

//curried produce signature produce(callback) => (state) => nextState

 const curriedProduce = produce((draft, action) => { switch (action.type) { case 'ADD_PACKAGE': draft.packages.push(action.package); break; case 'SET_INSTALLED': { const package = draft.packages.filter(p => p.name === action.name)[0]; if (package) package.installed = action.installed; break; } default: break; } });

 // add a new package to the starting state const nextState = curriedProduce(initState, { type: 'ADD_PACKAGE', package: newPackage, }); // update an item in the recently produced state const nextState2 = curriedProduce(nextState, { type: 'SET_INSTALLED', name: 'immer', installed: true, });

 yarn add immer use-immer

import React from "react"; import { useImmer } from "use-immer"; const initState = {} const [ data, updateData ] = useImmer(initState)

 // make changes to data updateData(draft => { // modify the draft as much as you want. })

 import React from "react"; import { useImmerReducer } from "use-immer"; const initState = {} const reducer = (draft, action) => { switch(action.type) { default: break; } } const [data, dataDispatch] = useImmerReducer(reducer, initState);