5/18 TIL

Redux?

상태관리 library

다음과 같은 특징을 지닌다.

Single source of truth: Store
State is read-only: Action
Change are made with pure function: reducer, dispatcher

Redux 모식도

Store

상태가 관리되는 단 하나의 공간, 전역 상태임. store 내 상태를 변경하기 위한 유일한 방법은 action을 dispatch하는 것뿐.

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

createStore(reducer, [preloadedState],[enhancer])
preloadedState: 옵션으로 넣을 수 있는 초기값.
enhancer: 함수이며, middleware를 붙이고 싶을 때 사용.
applyMiddelware(thunk): redux에 내장되어 있는 store enhancer. thunk는 비동기 액션을 가능케 하는 미들웨어임.

관련 method

• getState(): reducer가 리턴한 마지막 값. 현재 상태 트리 리턴.

• dispatch(action): 상태 변경을 위한 유일한 방법이며, 본 method가 실행되면 getState()의 경과와 reducer가 호출. 그 다음 리듀서의 리턴값은 변경된 새로운 값이며, 이후에 getState()의 값은 새로 변경된 값이 나오게 됨.

• subscribe(listener): 상태 변경을 알아채는 listner를 추가하는 메소드. action이 dispatch 될 때마다 불려짐.

• replaceReducer(nextReducer): 현재 사용 중인 reducer를 다른 reducer로 변경함.

Action

Data를 담는 객체형 contatiner

액션 생성자(action creators) 함수에 의해 생성되며, 리턴 값으로 액션을 갖는다.

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

Reducer

새로운 state를 생성하는 함수.

state에 변화가 생기면, 변화 내용이 담긴 action이 dispatch를 통해 전달된다. reducer는 변화가 있기 전의 상태 (accumulation)와 action을 통해 전달된 변화에 대한 정보를 가지고 새로운 상태를 생성함. 그 이후, 새로운 상태는 store로 전달됨.

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

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

reducer를 통해 새로운 상태를 만들때, 꼭 immutability를 유지해주자. 다시 말해, 기존의 상태를 변경하여 리턴하는 것이 아니라, 완전히 새로운 상태를 리턴해야 한다는 것임.

때문에 객체의 refer 복사가 아닌 해당 value를 복사하는 Object.assign method를 사용함.

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

Redux 장점

• status 예측 가능 (복잡도를 낮춤)
• 코드 유지보수 용이
• debugging 유리
• test를 붙이기 쉬움.