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

---

Redux (리액트를 다루는 기술 - velopert)

• 리액트 상태 관리 라이브러리
• 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적인 관리 가능
• 전역 상태를 관리할 때 효과적(Context API를 통해서도 가능)
• 프로젝트의 규모가 클 경우 리덕스 > Context API

  • 코드의 유지 보수성 높여주고 작업효율을 극대화해주기 때문

    ex) TODO

액션

• 상태에 어떠한 변화가 필요하면 액션(action)이 발생

• 하나의 객체로 표현된다

• 형식

  {
  	type: 'ADD_TODO'
  }

• 액션 객체는 type 필드를 반드시 가진다

  • type ⇒ 액션의 이름이라고 생각하면 된다
  • ex)

  {
  	type: 'ADD_TODO',
  	data: {
  		id: 1,
  		text: '공부하기'
  	}
  }
  
  {
  	type: 'CHANGE_INPUT',
  	text: '안녕하세요'
  }

액션 생성 함수

• 액션 객체를 만들어 주는 함수

const addTodo = (data) => ({
	type: 'ADD_TODO',
	data
}) 

• 변화를 일으켜야 할 때, 직접 액션 객체를 만들기보다 함수로 만들어서 관리

리듀서(reducer)

• 변화를 일으키는 함수
• 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 인자로 받아 옴
• 인자로 넘어온 두 값을 참고하여 새로운 상태를 만들어서 반환

const initialState = {
	counter: 1
};

const reducer(state = initialState, action) {
	switch(action.type) {
		case INCREMENT:
			return {
				counter: state.counter + 1
			};
		default:
			return state;
	}
}

스토어

• 한 개의 프로젝트는 단 하나의 스토어를 가진다
• 스토어 안에는 현재 애플리케이션 상태 & 리듀서 + 몇 가지 중요한 내장 함수
  • 스토어의 내장함수
    • 디스패치(dispatch)
      • 액션을 발생시키는 것
      • dispatch(action)
      • 디스패치 호출 ⇒ 스토어는 리듀서 함수를 실행시켜서 새로운 상태 만든다
    • 구독(subscribe)
      • 리스너 함수를 파라미터로 넣어서 호출해주면, 리스너 함수가 액션이 디스패치 될 때 (상태가 업데이트 될 때) 호출된다.

리어스의 세 가지 규칙

1. 단일 스토어
   • 1 app = 1 store
   • 다중 스토어가 불가능하지는 않다
     • 상태 관리가 복잡해질 수 있으므로 권장 X
2. 읽기 전용 상태
   • 상태를 업데이트 할 때 기존의 객체 건드리지 않고 새로운 객체 생성
   • 불변성 지켜주기 위해 spread 연산자 or immer와 같은 불변성 라이브러리 사용
   • 리덕스에서는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교검사를 한다
3. 리듀서는 순수한 함수
   • 변화를 일으키는 리듀서 함수는 순수 함수여야 한다.
     • 리듀서 함수는 이전 상태와 액션 객체를 인자로 받는다
     • 파라미터 외의 값에 의존하면 안된다
     • 이전 상태는 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다
     • 똑같은 파라미터로 호출된 리듀서 함수는 같은 결과 값을 반환해야 한다
   • 리듀서 함수 내부에서 랜덤값 만들기, Date 함수 사용하기, 네트워크 요청하기 X

Redux - React App 작업 환경 설정

UI

리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것.

• 프레젠테이셔널 컴포넌트
  • 상태 관리 X
  • props를 받아와서 화면에 UI를 보여주기만 하는 컴포넌트
• 컨테이너 컴포넌트
  • 리덕스와 연동되어 있는 컴포넌트로
  • 리덕스로부터 상태를 받아오기도, 리덕스 스토어에 액션을 디스패치 하기도 한다.

장점

• 코드의 재사용성
• 관심사의 분리가 이루어져 UI를 작성할 때 좀 더 집중할 수 있다.

• UI에 관련된 프레젠테이셔널 컴포넌트 ⇒ src/components
• 리덕스와 연동된 컨테이너 컴포넌트 ⇒ src/containers

Redux DevTools 의 설치 및 적용

• Redux 개발자 도구
• 크롬 확장 프로그램으로 설치하요 사용가능
• 패키지를 설치하여 적용하는 것 추천
  • yarn add redux-devtools-extension

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import { composeWithDevTools } from "redux-devtools-extension";
import App from "./App";
import rootReducer from "./modules";

const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

출처: 리액트를 다루는 기술(velopert님)