5/18 TIL

Redux?

ステータス管理ライブラリ
以下の特徴があります.
Single source of truth: Store
State is read-only: Action
Change are made with pure function: reducer, dispatcher

Redux模式図

Store

ステータス管理の一意のスペース、グローバルステータス.store内の状態を変える唯一の方法はactionを割り当てることです.

const store = createStore(reducer) // 옵션없음. 
const store = createStore(reducer, compose(applyMiddelware(thunk)) // 옵션추가

createStore(reducer, [preloadedState],[enhancer])
≪プリロード・ステータス｜Preload Status｜oem_src≫:オプションとして挿入できる初期値.
エンハンサー:中間部品を貼り付ける関数.
applyMiddelware(thunk):redoxに内蔵されたstore増強剤.thunkは非同期動作をサポートするミドルウェアである.
関連メソッド

getState():reduceが返す最後の値.現在の状態を返します.

dispatch(action):ステータス変更の唯一のメソッドで、このメソッドを実行するとgetState()の経過とreduce呼び出しが表示されます.その後、reducerの戻り値は新しく変更された値になり、getState()の値は新しく変更されます.

subscribe(listener):ステータスの変更に気づいたlistnerを追加する方法.actionがスケジューリングされるたびに呼び出されます.

Replace Reducer(NextReducer):現在使用されている減速機を別の減速機に変更します.

Action

データ付きオブジェクトコンテナ
アクション作成者(action creaters)関数によって生成され、アクションは戻り値として返されます.

{
	type: TOGGLE_MODE,
    	payload: {
		...state,
        toggleMode: true
	}
} // type은 필수적으로 작성하자!

Reducer

新しい状態の関数を生成します.
stateが変化すると,変化内容を含む動作がdispatchによって伝達される.reduceは,変化前の状態(蓄積)と動作によって伝達される変化情報を用いて新しい状態を作成する.その後、新しいステータスがstoreに転送されます.

function reducer(initialState, action) {
	return output
} // 상태 변화를 일으킴.

const myReducer = combineReducers({reducer1,reducer2,reducer3})
// reducer 여러 개를 묶는 방법.

reduceで新しいステータスを作成する場合は、必ず変更しないでください.すなわち、既存のステータスを変更して返すのではなく、新しいステータスを返す必要があります.
したがって、オブジェクトは複製オブジェクトの参照ではなく、複製オブジェクトの値です.付与メソッドを使用します.

return Object.assign({}, state, newData)
return {...state, ...newData} // 중복된 key는 덮어씌우는 로직을 이용.

Reduxのメリット

状態予測可能(複雑度低減)

コードメンテナンス

調整ガラス

のテストが容易です.