[Redux]Reduxベース-Reduxを使用した構造について

1. Redux

データ・ストリームを一方向化して、分散した構造とストリームをクリーンアップします.
コードのメンテナンスと整合性を向上させるツール.
react名と似ていて、混同される可能性がありますが、reactとは全く違います.

2.JavaScriptでのデータストリーム

Reduxを使用する前に、Javascriptコードのデータストリームを最初に表示します.

//Vanilla

const add = document.getElementById("add")
const minus = document.getElementById("minus")
const number = document.querySelector("span")

let count = 0

number.innerText = count

const updateCount = () => {
  number.innerText = count
}

const handleAdd = () => {
  count = count + 1
  updateCount()
}
const handleMinus = () => {
  count = count - 1
  updateCount()
}

add.addEventListener("click", handleAdd)
minus.addEventListener("click", handleMinus )

各ボタンタグは、

getElementIdによってadd(count+1)、minus(count-1)関数に接続される.

updateCount関数により,変化するcountをhtmlタグに実質的に反映し,画面上で実現する論理を増やした.

このコードでは,変化を表すデータ値countストリームを以下に示す.

はEventListenerによってcountを+1と-1に設定するだけでは画面上で実現できない.

で変化したデータをリンクされたhtmlタグに反映し、画面に表示するために更新する必要がある.

3-1. Reduxが使用する基本概念

きおくくうかん

Reduxには、すべてのデータと変化したステータス値を格納できる記憶領域があります.

データをスペースに入れて、後で修正、管理する時に統一/一方向を行うことができます.

Storeと併用したreduce

reduxのように使用されるreduceは関数です.

は、reduceによってデータを変更することができる(唯一の変更機能を提供する関数).

3-2. Storeとreduceの基本構造

きおくこうぞう

//Vanilla
import { createStore } from "redux"

const add = document.getElementById("add")
const minus = document.getElementById("minus")
const number = document.querySelector("span")

const reducer = () => {
  return 
}
const countStore = createStore(reducer)
console.log(countStore)

上記のコードに示すように、リポジトリを作成し、reduce関数に接続します.
reduce関数内部のデータ値は、状態を反映したり、変更したりすることができます.
チェックストアをlog出力することで4つの関数が得られる.
上記コードでStoreをログに記録した結果は以下の通りです.

この4つの関数を用いて,1つの機能プログラミングにより複雑な状態管理を実現できる.
getStateでは、アプリケーションステータス管理に反映するデータ値をすぐに宣言できます.

const reducer = () => {
  return "HELLO"
}
const countStore = createStore(reducer)
console.log(countStore.getState)

特に、reduce関数の戻り値に戻りたい文字列を表示し、getState関数を使用してログをチェックします.

アプリケーションのデータ値として反映されるreduce関数の戻り値を受け入れることができます.
ステータスをReducerで更新します.
これをcreateStoreに戻して、データの変化とステータス管理を実現できます.

import {createStore} from 'reducer'

const reducer = (state) => {
	modify state
    return state.value
}

createStore(store.getState)

上記の構造を使用してデータを変更してステータスを反映し、getStateを介して反映されたステータス値を渡すと、ステータスが反映されたデータ値、すなわち変化したデータ値を直ちに利用することができる.

※const reduceという関数はユーザー自身が定義しなければならないが、createStoreがステータス値を受け入れるためには、論理の構築に注意しなければならない.

4. action

reduce外部とのコミュニケーションのために作成されたreduce関数の2番目のパラメータ

const reducer = (state = initial_value, action) => {
	return state
}

整理後、宣言されたreduce関数で

の状態を受信して初期化し、

.

を返し、リポジトリでその値をgetStateして、アプリケーションのステータス値を渡す方法を理解しました.

からaction因子を追加し,外部から状態値を変更し,その変化過程を理解する.

4-1. 2番目のパラメータとしてreduceに伝達される関数も、reduceとのコミュニケーションの経路である。

reduce関数は、状態と動作を伝達します.

const reudcer = (state = initial_value, action) 

デフォルトでは、createStoreには4つの関数があります.
ここでdispatch関数を使用すると、対応する動作をreduceに渡すことができます.

上の図に示すように、createStore自体には4つの関数があります.

getStateは、

の関数であり、ストレージ領域で宣言されたステータス値をロードします.

で現在使用されているdispatchは、オブジェクト/コマンドをreduceの動作パラメータに渡すことで、reduce関数での動作の利用を支援する

の機能を提供しています.

位で述べたように、行動によって減速機とコミュニケーションをとることができる.

const reducer = (state = 0, action) => {
  console.log(action)
  return state
}
const countStore = createStore(reducer)

countStore.dispatch({dispatced_action : "HELLO"})

上の論理フローを見てみましょう

countStoreによってStoreが生成され、ここでreduce関数を加え、状態と動作をStoreに接続します.

宣言されたreduceは、最初に

Storeによって呼び出され、状態値が初期値0として宣言され、動作が受信される(この動作はStoreから受信されたオブジェクトを出力する).

以降はStoreを介してdispatch(action)を呼び出し、減速機を再起動し、動作は最終的に減速機に伝達される.

動作後の反映状態値、すなわち、データを返して記憶領域に反映する.

※dispatchで渡されるオブジェクト値自体がactionデフォルトであり、このactionが渡されるとreduceが呼び出されることに注意してください.
すなわち、reduceを外部から呼び出して内部の値を変更することができる.
※基本的にはcreateStoreでreduceとstoreを接続しているので、可能な仕組みであることを忘れないでください.

4-2. (参照)データをreduceとactionのコミュニケーションに変換します。

const reducer = (state = 0, action) => {
  if(action.type === "ADD"){
    state = state + 1
  }
  if(action.type === "MINUS"){
    state = state - 1
  }
  console.log(state)
  return state
}
const countStore = createStore(reducer)

countStore.dispatch({type : "ADD"})

上記のコードを実行すると

前に示したように,0,1が順次現れる.

初期ストレージの作成時に減速機を接続し、ステータス値が0と宣言されたときにログを出力します.

以降dispatchでreduceを再度呼び出し、変更後のステータス値を返してログを出力します.

外部からreduceを呼び出して内部データ値を変更できます.

4-3. (参照)actionによるデータの変更の原理

ここで疑問に思うかもしれませんが、最初のreduceが呼び出されたとき、state値を直接変更すればいいのではないかと思うかもしれません.
結論から言えば変えられる.
Actionの核心はreduceとのコミュニケーションであり,外部からreduceを呼び出すことができる.
これはdispatchでactionを呼び出すときにreduceをもう一度呼び出す原理に基づいて実現されることを覚えておいてください.