Reduxを理解し、簡単なテストを行いました.個人記録に使用します.

1) redux

簡単に言えば、ステータス管理ライブラリは액션(Action), 미들웨어(middleware), 리듀서(Reducer), 스토어(Store)です.미들웨어において、Reduserは、動作を処理する前に、ミドルウェアにおいて様々なタスクを処理することができる.

1.1)Ridex jsで実施

import {createStore} from 'redux';

// action types

// action

// reducer

// store

// dispatch , discription

動作(動作タイプ)、リプレイ、およびショップ部分をjsファイルで処理して再テストします.

1.1.1) action, action types

動作は、状態が変化する必要がある場合に動作し、typeのようなtype : 'ADD_COMMENT'のオブジェクトを指定する必要があります.

// action types
const NUM_INCREASE = 'NUM_INCREASE';
const NUM_DECREASE = 'NUM_DECREASE';

// action 생성 함수
const numIncrease = data => {
  return { type: NUM_INCREASE, data }
}
const numDecrease = data => {
  return { type: NUM_DECREASE, data }
}

アクション生成関数では、割り当てアクションが発生したときにパラメータに渡す関数です.
Actiontypesのような場合はどこでも使用できるので、フォルダを別々に管理してexportを使用するのが望ましい.

1.1.2) reducer

動作がdispatchで励起されると、リダイレクトは現在の状態(state)と動作オブジェクト(action)を受信し、この2つの値に基づいて新しい状態を作成して返す.

// 초기값 설정
const initialState = { num : 17}
// reducer
const reducer = (state=intialState, action) => {
  switch(action.type) {
    case NUM_INCREASE :
      return { ...state, num: state.num + action.data };
    case NUM_DECREASE :
      return { ...state, num: state.num - action.data };
    default :
      return state
  }
}

1.1.3) Store

1つのプロジェクトには1つの店しかありません.
ショップには、プロジェクトのステータスに関連するデータとリダイレクトが含まれています.
ショップに2つ以上のリダイレクトを含める場合は、combineReducersを使用してrootReducerを作成し、マージする必要があります.

// 리듀서가 하나라면
const store = redux.createStore(counterReducer);
// 두 개 이상의 리듀서
const combineReducers = redux.combineReducers

1.1.4) description

store.subscribe(() => {
  console.log('state ==>>', store.getState());
}

storeの内蔵関数で、関数形式の値をパラメータとして受信し、動作が割り当てられたときに伝達された関数を呼び出す.
ステータス値を表示するには、getState()を使用します.

1.1.5) dispatch

storeの内蔵関数で、storeのreduceに渡すことができます.reduceは、dispatchに送信された動作関数を受信し、対応するaction.type論理を実行する.

store.dispatch(numIncrease(2));
store.dispatch(numDecrease(10));
store.dispatch(numIncrease(3));
store.dispatch(numIncrease(5));

1.1.6) middleware

アクション=>>リカバリ=>>ショップ
アクション=>>ミドルウェア=>>リカバリ=>>ショップ
ミドルウェアは、動作がディスパッチされ、リダイレクタが動作を受信して処理する前に他の動作を実行することができる永久的なソフトウェアである.
ある論理に基づいて入力されたアクションをキャンセルしたり、出力をコンソールに追加したり、他のタイプのアクションを追加したりします.
次に、redux-loggerを使用して、ステータス値変化プロセスをコンソールウィンドウに簡単に出力します.

// import
const reduxLogger = require('redux-logger')
const logger = reduxLogger.createLogger();

// store
const store = redux.createStore(counterReducer,redux.applyMiddleware(logger));

// dispatch
store.dispatch(numIncrease(2));
store.dispatch(numDecrease(10));