[Redux]Reduxは

📌 リファレンス📌

https://www.youtube.com/watch?v=Jr9i3Lgb5Qc&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=1

Reduxとは?

開発者を脅かす最大の要因は、見えない複雑さです.
複雑さは開発者を低迷させ、プロジェクトの失敗を招く.
開発者と管理職の間の紛争を引き起こす.reduxはアプリケーションの複雑さを軽減し、
JavaScriptで作成した予測可能な状態コンテナ.reduxやjQueryなど様々なフレームワークがあります.
使用中のため、vanillaJS万のライブラリには対応していません.

Single Source of Truth

すべてのデータを1つのreactに入れます.
1つのオブジェクトstateに必要なすべてのデータを加えて、複雑さを低減する.
1つの場所のデータを集中的に管理することで、効率的に管理できます.

取り消しとやり直しが容易

各値のstateを作成または変更します.
ソースをコピーし、コピーを変更して新しいソースを作成する方法を使用します.
独立した形態を維持し、それぞれの変化はお互いに影響を与えない.
アプリケーションのステータス変更を簡単に処理できます.

過去のある時点のステータスを追跡

現在の状態だけでなく、以前の状態も記録します.
ある時点のアプリケーションのステータスを特定することで、問題をより簡単に解決できます.
アプリケーションのステータスがいつ、どこで、なぜ、どのように変更されるかを簡単に追跡できます.

モジュール再ロード

データを入力して修正すると、データが消えてしまい、再入力が必要になります.stateのアプリケーションは、新しいページ間で切り替えることができます.
データはそのままで、操作を入力する必要はありません.

📌 リファレンス📌

https://www.youtube.com/watch?v=1U0vBNHyKaw&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=3
https://www.youtube.com/watch?v=F_NLNBOqZrQ&list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc&index=4

操作方法

reduxは非常に抽象的です
まず、李徳思はどのように操作しましたか.状況を把握することが大切だ.

store

アプリケーション内のすべての情報を格納する場所redux 글 목록에 대한 정보

state

実際の情報を格納する場所현재 선택된 글에 대한 정보の値への直接アクセスが禁止されているためです.
いつも誰かを通して近づく.

reducer

stateの中で最も困難な概念reduxを生成するために必要なパラメータ.store関数の供給をします.

function reducer(oldState, action){
	// 
}
let store = Redux.createStore(reducer); // store 생성

reducer, dispatcher

reducer()の値は、reducer()およびdispatcher()の関数で変更できます.stateの値を変更するたびに、各アプリケーションに通知されます.
したがって、各アプリケーションは、お互いに関心を持つことなく、独自の作業を実行するだけです.

render

stateの外にある空間ですが、storeとは直接的なつながりはありません.reduxの値を参照して、stateを生成します.

getState

UIは、外部から完全に隔離された重要な情報です.
外部からデータを直接制御できません.state関数を用いてgetState()値を得ることができる.stateの値の予期せぬ変更を事前に阻止できます.stateにアクセスして値を取得する方法state → render → getState → state → getState → render

function render(){
  let state = store.getState(); // state 의 값을 가져온다.
  // ...
  // state 값을 이용하여 UI 를 만듦
  document.querySelector('#app').innerHTML = 
    <h1>WEB</h1>
    ...
}

subscribe

UIにrender関数が登録されている場合、subscribeのstore値を変更するたびにstate関数の呼び出しに伴い、renderが更新される.

store.subscribe(render);