どうも、ぽっぽです。
Reduxの公式ドキュメントを読んで理解したことを紹介します。
Reduxについて解説して、どうやって正しく使うかを紹介します。最近のおすすめのツール（Redux Toolkit）の使い方とベストプラクティスを教えます。
Reduxとは何か
actionと呼ばれるイベントでアプリケーションのstateを更新し管理するライブラリとパターンのこと
Reduxが提供するパターンとツールは、アプリケーションのstateをいつ、どこで、なぜ、どうやって更新されるか理解しやすくなります。
Reduxは共有されたstateを管理するのに役立つけれど、概念を学ばないとならないし、そのためのコードを書かないとなりません。そういったある種の制限をかけないとなりません。
Reduxが最も有用なときをまとめると
- アプリケーションの
stateが大きくたくさんの場所から参照される stateが頻繁に更新される- 更新のロジックが複雑
- 中規模から大規模のコードベースで沢山の人々に使われる
すべてアプリケーションはReduxを必要としません。アプリケーションを構築する前によく検討して、Reduxを使うかどうか決めましょう。
Reduxは小さなスタンドアローンのJSライブラリーです。でも、普通はいくつかの他のパッケージと一緒に使います。
React-redux
ReduxはUIフレームワークと一緒に使えます。よく利用される代表的なものはReactです。React-Reduxは公式パッケージです。Reactコンポーネントとstate を読み出したり更新したりするRedux Storeを組み合わせます。
Redux Toolit
Reduxロジックを書くための推奨アプローチです。Reduxアプリケーションを構築する基本となるパッケージと関数が含まれます。Reduxのタスクをシンプルに記述できて、よくあるミスを未然に防ぎます。
Redux DevTools Extension
Redux Storeのstateの状態を履歴として表示します。アプリケーションをデバッグするのに効果的です。
Reduxのコンセプト
アプリケーションはstate、view、actionsからなりたっています。one-way data flowの例を示すと
Stateはアプリケーションのある時点の状態を記録しています。UIはstateに基づいて描画されます。- ボタンをクリックしたりしてなにかが起こると
stateがイベントに応じて更新されます。 UIが再描画されます。
複数のコンポーネントが同じstateを共有する必要があるとき、特にそれらのコンポーネントが異なる場所に配置されているとき、親コンポーネントにstateを移動させる必要がなくなります。
コンポーネントからstateを抜き出してコンポーネントツリーの外に配置します。コンポーネントツリーのどこにあろうともactionsによってstateにアクセスすることが出来ます。viewsとstateを独立して管理するルールを強制するコンセプトがコードをより構造的にメンテナンスしやすくさせます。
Immutability
Mutableは可変、immutableは決して変更されないことを意味します。
JavaScripのobjectsとarraysは何もしなければすべてmutableです。immutablyに更新するためには、コードでobjects/arraysをコピーして、そのコピーを変更します。
手動でJavaScriptのarrya/objectをスプレッドオペレータを使う例を示します。
const obj = {
a: {
// To safely update obj.a.c, we have to copy each piece
c: 3
},
b: 2
}
const obj2 = {
// copy obj
...obj,
// overwrite a
a: {
// copy obj.a
...obj.a,
// overwrite c
c: 42
}
}
const arr = ['a', 'b']
// Create a new copy of arr, with "c" appended to the end
const arr2 = arr.concat('c')
// or, we can make a copy of the original array:
const arr3 = arr.slice()
// and mutate the copy:
arr3.push('c')Reduxはすべてのstateの更新はimmutablyに行われる必要があります。
用語
先にすす前に、Reduxで用いられるいくつかの用語について説明します。
Actions
actionはプレーンなtypeフィールドがあるJavaScriptオブジェクトです。アプリケーションで何かのイベントが起こることにたいして端的に説明する文字列のことです。例えばtodos/todoAddedなら「Todoに追加すること」を表すなどです。たいてい文字列は"domain/eventName"のように記述します。最初の部分は仕様やカテゴリーで２つ目は「何が起こったか」を表します。
任意のActionオブジェクトは追加情報としてpayloadと呼ばれるフィールドに情報を追加することがあります。
const addTodoAction = {
type: 'todos/todoAdded',
payload: 'Buy milk'
}Action Creators
action creatorは関数です。actionオブジェクトを返します。
const addTodo = text => {
return {
type: 'todos/todoAdded',
payload: text
}
}Reducers
reducerは現在のstateとactionオブジェクトを受け取って、必要に応じてstateを更新する方法を決定する関数です。
Store
storeと呼ばれるオブジェクトに現在のReduxアプリケーションの状態を保持されています。
Dispatch
Reduxはdispatchと呼ばれるメソッドを持っています。stateを更新する唯一の方法はactionオブジェクトを引数に渡してstore.dispatch()を呼ぶことです。
Selectors
selectorはstoreからstateの情報を抜き出す方法を知っている関数です。
