Redux の動作原理を理解する？#
一、何か#
Reactはユーザーインターフェースを構築するために使用され、DOMのレンダリングプロセスを解決するのに役立ちます。
アプリケーション全体には多くのコンポーネントが存在し、各コンポーネントのstateはそれぞれが管理します。これには、コンポーネントが自身のstateを定義し、コンポーネント間の通信がpropsを介して行われ、データ共有がContextを使用して行われるというものが含まれます。
各コンポーネントが自身に関連する状態を保存する場合、理論的にはアプリケーションの実行に影響を与えないはずですが、開発および後続のメンテナンスの段階では、状態の変化のプロセスを調べるために多くの労力を費やすことになります。
このような場合、すべての状態を集中管理することで、状態を更新する必要がある場合には、この管理を集中的に処理するだけでなく、状態が各コンポーネント内部にどのように分配されるかを気にする必要はありません。
reduxは、上記の集中管理を実現するコンテナです。次の 3 つの基本原則に従います。
- 単一のデータソース
- state は読み取り専用です
- 変更を実行するために純粋な関数を使用します
注意すべきは、reduxはreactだけでなく、他の UI ライブラリとも一緒に使用されることです。たとえば、Vueなどです。
二、動作原理#
reduxは、データをstoreという共有ストレージに配置するよう要求します。
1 つのコンポーネントがstore内のデータを変更すると、他のコンポーネントはstoreの変更を感知し、データを取得することができます。これにより、これらのデータの伝達機能が間接的に実現されます。
以下は、ワークフローダイアグラムです：
フローチャートに基づいて、React Componentsは本を借りるユーザーであり、Action Creatorは本を借りるときに話す言葉（どの本を借りるか）、Storeは図書館の管理者であり、Reducerは記録帳（どの本を借り、どの本を返すか、どこにあるか、調べる必要がある）であり、stateは本の情報です。
全体のプロセスは、本を借りるユーザーがまず存在する必要があり、本を借りる必要があり、借りる本を説明するための一言が必要です。図書館の管理者はそれを聞いた後、記録帳を調べて本の位置を知り、最後に図書館の管理者はその本を借りる人に渡します。
コードに変換すると、React Componentsはデータを取得する必要があり、それからStoreにデータを取得するように伝えます。これがAction Creatorです。Storeはそれを受け取った後、Reducerを調べ、ReducerはStoreにこのコンポーネントにどのデータを提供する必要があるかを伝えます。
三、使用方法#
共有データ領域であるstoreを作成します。
import { createStore } from 'redux' // サードパーティのメソッドをインポート
const store = createStore() // データの共有ストレージ（管理者）を作成
データを補助的に管理するために、reducerと呼ばれる記録帳を作成する必要があります。これは基本的には 2 つのパラメータstateとactionを受け取り、stateを返す関数です。
// デフォルト値を設定
const initialState = {
counter: 0
}
const reducer = (state = initialState, action) => {
}
次に、記録帳をstoreに渡して、2 つを接続します。以下のようになります：
const store = createStore(reducer)
store内のデータを取得したい場合は、store.getState()を使用して現在のstateを取得できます。
console.log(store.getState());
次に、store内のデータを変更する方法を見てみましょう。dispatchを使用してactionを送信します。通常、actionにはtypeプロパティが含まれ、他のデータを持たせることもできます。
store.dispatch({
type: "INCREMENT"
})
store.dispath({
type: "DECREMENT"
})
store.dispatch({
type: "ADD_NUMBER",
number: 5
})
次に、reducerの処理ロジックを変更してみましょう：
const reducer = (state = initialState, action) => {
switch (action.type) {
case "INCREMENT":
return {...state, counter: state.counter + 1};
case "DECREMENT":
return {...state, counter: state.counter - 1};
case "ADD_NUMBER":
return {...state, counter: state.counter + action.number}
default:
return state;
}
}
注意点として、reducerは純粋な関数であり、stateを直接変更する必要はありません。
このようにactionを送信した後、store.subscribeを使用してstoreの変更を監視できます。以下のようになります：
store.subscribe(() => {
console.log(store.getState());
})
Reactプロジェクトでは、react-reduxと組み合わせて使用されます。
完全なコードは以下の通りです：
const redux = require('redux');
const initialState = {
counter: 0
}
// reducerを作成
const reducer = (state = initialState, action) => {
switch (action.type) {
case "INCREMENT":
return {...state, counter: state.counter + 1};
case "DECREMENT":
return {...state, counter: state.counter - 1};
case "ADD_NUMBER":
return {...state, counter: state.counter + action.number}
default:
return state;
}
}
// reducerに基づいてstoreを作成
const store = redux.createStore(reducer);
store.subscribe(() => {
console.log(store.getState());
})
// storeのstateを変更する
store.dispatch({
type: "INCREMENT"
})
// console.log(store.getState());
store.dispatch({
type: "DECREMENT"
})
// console.log(store.getState());
store.dispatch({
type: "ADD_NUMBER",
number: 5
})
// console.log(store.getState());
結論#
- createStore は store を作成するのに役立ちます
- store.dispatch は action を送信するのに役立ちます。action は store に渡されます
- store.getState メソッドは、store 内のすべてのデータを取得するのに役立ちます
- store.subscribe メソッドは、store の変更を購読します。store が変更されると、store.subscribe に渡されたコールバック関数が実行されます