Redux

리덕스

장점

• 컴포넌트 코드로 부터 상태 관리 코드를 분리할 수 있다.
• 서버 렌더링 시 데이터 전달이 간편하다.
• 로컬 스토리지에 데이터를 저장하고 불러오는 코드를 쉽게 작성할 수 있다.
• 같은 상탯값을 다수의 컴포넌트에서 필여ㅛ로 할 때 좋다.
• 부모 컴포넌트에서 깊은 곳에서 있는 자식 컴포넌트에 상탯값을 전달 할 때 좋다
• 알림창과 같은 전역 컴포넌트의 상탯값을 관리할 때 좋다.
• 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋다.

원칙

• 전체 상탯값을 하나의 객체에 저장한다
• 상탯값은 불변 객체다
• 상탯값은 순수 함수에 의해서만 변경되어야 한다.

구성

• 액션
• 미들웨어
• 리듀서
• 스토어

액션

• type 속성값을 가진 js 객체.
• action 객체를 dispatch 메서드에 넣어서 호출하면 리덕스는 상탯값을 변경하기 위해 위 그림 처럼 수행한다.

store.dispatch({ type: 'ADD', title: '타이틀 추가할 내용', priority:'high'})

미들웨어

• 리듀서가 액션을 처리하기 전에 실행되는 함수다.
• 디버깅 목적으로 삭탯값 변경 시 로그를 출력하거나, 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적으로 활용 한다.

const middleware = store => next => action => next(action)

스토어

• 리덕스의 상탯값을 가지는 객체다.
• 액션의 발생은 스토어의 dispatch 메서드로 시작된다
• 스토어는 액션이 발생하면 미들웨어 함수를 실행하고, 리듀서를 실행해서 상탯값을 새로운 값으로 변경한다.

const INITIAL_STATE = { value: 0};
const reducer = createReducer(INITIAL_STATE, {
  INCREMENT: state => (state.value +=1),
});
const store = createStore(reducer);

비동기 처리 방법

• 리듀서 안에서 비동기를 하게 되면 3번 원칙인 '상탯값은 순수 함수에 의해서만 변경되어야 한다.' 위배된다. 그래서 middleware에서 처리 하는데 이때 패키지를 쓴다.
• redux-thunk, redux-observable, redux-saga

출처: 실전 리액트 프로그래밍, 이재승, 인사이트(2020), pg 249~308