TIL) 210607 Redux

Reduxとは?

共通の親によってステータス値を管理するフィードバック設計モードでは、構成部品以外でステータスを管理することで、プロジェクトのステータスをより簡単に理解でき、プロジェクト規模が増大した場合のステータス管理の難題を解決できます.これは、デバッグとテストが容易なライブラリです.

Fluxモード

設計モードにはDispatcher、Stores、Viewsが含まれます.
Reactのように、一方向データストリームに従います.

Reduxの構造

Action

{
  type: "Todo", //필수항목
  data: {
    id: 0,
    text: "something"
  }
}

Actionは、タイプが明確なオブジェクトデータをReducerに渡します.このデータは、ステータスをどのように更新するかを指定します.

Reducer

Reducerは、現在の状態と動作で伝達されたタイプの加工データに基づいて状態を更新する.

function reducer(state, action) {
  if(action.type){
  	...
  }
  ...
  
  return changedState
}

*Reducerは純真を付与する必要があります.

Dispatch

dispatchはショップの内蔵関数で、reduceに動作を送信します.

	dispatch(action)

Store

ReducerやDispatchなどの組み込み関数を含むアプリケーションのすべてのステータスを保存します.

//store.js
export const store = createStore(rootReducer, applyMiddleware(...middlewares));

//index.js
 <Provider store={store}>
    <App />
 </Provider>

Subscribe

ショップの内蔵関数の1つとして、関数形式の値をパラメータとして使用します.
アクションが派遣されるたびに、渡された関数が呼び出されます.