スタート[React-Redux][1]

6526 ワード
redux JavaScript context テキストリンク
ユデミの講座でまとめた内容です.

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"})
    vsprintf可変関数パラメータ
    javascript - ES6(4) Object