ユデミの講座でまとめた内容です.

1.Context APIの欠点

授業中に...
Redux is an alternative to the Context API
どちらもCross-Component/App-WadeStateをうまく管理しており、
Contextの欠点を理解!

context APIの欠点
1)インストールプロセスが複雑で、大規模なアプリケーションを作成する際の欠点がより際立っている.
各contextを作成する場合

コンテキスト内
両方とも...
2)性能があまり理想的でない:頻繁に変化する状態に合わない
「Reduxはこの2つの欠点を解決します!!」

2.Reduxの核心概念

すべての州は、中央データ(Store)に格納されています.

コンポーネントはstoreの特定のステータスを購読します.

コンポーネントはstoreデータ(state)を直接操作しません.

ストレージデータ(state)を変更できるのは、

Reducer Functionのみです.

コンポーネントは、Dispatch Reducer関数を実行するためのアクションを発行する.

3.Reducerの構造

input(パラメータ):“Old(preference,current)state”,dispatched“action”

出力(戻り値):New State(値またはオブジェクト)

4.redoxデフォルト(in vanillaJS):store、reduce、state、subscribe、dispatch

// redux 설치하기
npm i redux

// redux 가져오기
const redux = require("redux"); // nodejs 예시

//reducer : state 변경 함수. 첫 실행 시 필요한 default value 필요
// 위 reducer 설명 참고
const exampleReducer = (state = { counter: 0 },action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1
    };    
  } else if (action.type === "decrement") {
    return {
      counter: state.counter - 1
    };    
  } else {
    return state
  };
};

//store : redux.createStore(reducer)로 생성. reducer는 store data를 변경할 reducer 넣기
const store = redux.createStore(exampleReducer);

// state : store.getState()
const latestState = store.getState();

// subscribe : store.subscribe(해당 store data(state) 변경 시 실행할 함수)
const exampleSubscriber = () => {
	const latestState = store.getState();
  	console.log(latestState);
};
store.subscribe(exampleSubscriber);

// dipatching action: 인자로 type 키를 가진 객체 필요
store.dispatch({type: "increment"})