TIL) 210607 Redux

Redux란?

공통된 부모에서 상태값을 관리하는 리액트의 디자인 패턴에서, 프로젝트의 규모가 커졌을때 발생하는 상태관리의 어려움을 해결하기 위해 고안된, 상태를 컴포넌트 바깥에서 관리하여 프로젝트 규모에 상관없이 상태파악을 쉽게 할 수 있고, 디버깅과 테스팅을 용이하게 만들어 주는 라이브러리이다.

Flux패턴

Dispatcher, Stores, Views로 구성된 디자인 패턴이며,
React와 같이 단방향 데이터 흐름을 따른다.

Redux의 구조

Action

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

Action은 어떤방식으로 상태를 업데이트할지 정해주는 type이 명시된 객체 데이터를 reducer에게 전달해 준다.

Reducer

Reducer는 현재의 상태와, Action에서 넘겨받은 type에 따라 데이터를 가공해 상태를 업데이트해준다.

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

*Reducer는 순수함수여야한다.

Dispatch

디스패치는 reducer에게 액션을 발생시키라고 전달하는 스토어의 내장함수이다.

	dispatch(action)

Store

앱의 모든 상태를 보관하고, Reducer와 Dispatch와 같은 내장함수들을 포함하고 있다.

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

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

Subscribe

스토어의 내장 함수 중 하나로 함수 형태의 값을 인자로 받으며,

액션이 디스패치 될 때 마다 전달해준 함수를 호출한다.