Redux-基本概念

💻 Redux-コンセプトキャプチャ💫
💡 李徳思とは何ですか.
JSで作成したAPPを使用する予測可能なリポジトリ.

単一ショップ(アプリケーションの状態を知りたい場合はReducerを使用してください)

集中データストアによりアプリケーション

を容易に開発

Redux dev Toolでファイル->Import->履歴を復元できます
(タイムトラベル!:私が選択した値と変更した値をビデオのように表示できます)

部品間の依存しないコード

👉 パイロットアクション

state

レンダリング:stateに基づいて画面に描画します.

dispatch:変更値

subscribe:

関数を登録し、値の変更時に起動します.

getState:値の取得
stateへの直接アクセスは禁止されているので、これらのアクションを使用します.

reductor:ステータス値を変更します.
stateというドキュメントの値を修正した人だと思います!

👉 イニシャル減速機

 function reducer (state, action){
 	if(state === undefined){
           // 최초의 초기화 단계 
           // state 값이 정의되어 있지 않는 상태에서 reducer 가 호출되었다.
            return { color: "yellow"}
        }
    }

    var store = Redux.createStore(reducer);

    function red() {
        var state = store.getState()
        document.querySelector('#red').innerHTML = `
        <div class="container" id="component_red" style="background-color:${state.color}">
            <h1>red</h1>
        </div>
    `
    }
    red()

👉 Reducerの役割

// reducer function 안에서..
 var newState;
if(action.type === "CHANGE_COLOR"){
  newState = Object.assign({}, state, {color: action.color})
  // 두번째 인자가 첫번째 빈 객체에 복제되서 그 객체가 리턴된다. 
  // 세번째 인자가 덮어쓰게된다.  -> 그 결과를 리턴
  // 불변성 때문에 복제 방법 사용
}
return newState

storeのステータス値を変更します.

actionの状態値と以前の状態値を使用して新しい状態値を返すと、返される値は新しい状態値になります
元のデータではなくレプリケーションの結果を返す必要がある(Reduxを最大限に利用するために)

.
👉 Subscribeのキャラクター
サブスクリプション

ステータスの値を変更するかどうか->サブスクリプション

store.subscribe(구독할 함수이름)

🐥 サンプルコード:main。html
出典:ライフコードRedux
https://www.inflearn.com/course/redux-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9