[React] Redux

in Devlog on React.js, Devlog, Redux, Store



Redux 란?

상태 관리 라이브러리 중 사용률이 높은 라이브러리

컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리

컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 상태 값 전달 할 수 있음

리덕스의 미들웨어라는 기능을 통하여 비동기 작업, 로깅 등 확장적인 작업들을 더욱 쉽게 할 수도 있게 해줌.

* 리덕스는 리액트에 종속되지 않는다. 리액트에서 사용하려고 만든거지만, 다른 UI 라이브러리나 프레임워크와 함께 사용 될 수 있다.

Redux 개념

  • Action
  • Action Creator
  • Reducer
  • Store
  • Dispatch
  • Subscribe

Action

상태에 어떠한 변화가 필요하게 될 때, 액션이라는 것을 발생시킴.

하나의 객체로 표현됨.

{
  type: "TOGGLE_VALUE"
}

* 액션 객체는 type 필드를 필수적으로 가지고 있어야함.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

{
  type: "CHANGE_INPUT",
  text: "test"
}

Action Creator

액션을 만드는 함수.

단순히 파라미터를 받아와서 액션 객체 형태로 만들어줌

Reducer

변화를 일으키는 함수

Reducer는 두가지 파라미터를 받아옴.

  1. 현재 상태
  2. 액션

새로운 상태를 만들어서 반환함.

function reducer(state, action) {
	// 상태 업데이트 로직
	return alteredState;
}

Store

리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다.

스토어 안에는 현재 앱 상태와 리듀서가 들어가 있고 추가적으로 몇가지 내장함수들이 있다.

Dispatch

스토어의 내장 함수 중 하나. 액션을 발생 시키는 것

dispatch라는 함수에서 액션 파라미터로 전달

Store는 리듀서 함수를 실행 시켜 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줌.

Subscribe

구독 또한 스토어의 내장함수 중 하나 subscribe함수는 함수 형태의 값을 파라미터로 받아옴.

함수 형태의 값을 파라미터로 받아옴.

subscribe함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됨.

Redux의 3가지 규칙

리액트에서 리덕스를 사용하게 될때 알아둬야할 3가지 규칙

  1. 하나의 애플리케이션 안에는 하나의 스토어가 있다.
  2. 상태는 읽기 전용 이다.
  3. 변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다.

1. 하나의 애플리케이션 안에는 하나의 스토어가 있다.

하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용함.

여러개의 스토어를 사용하는 것은 가능하나 권장되지 않는다.

특정 업데이트가 너무 빈번하게 일어나거나 애플리케이션의 특정부분을 완전히 분리시키게 될 때 여러개의 스토어를 만들 수 도 있다. 하지만 그렇게 하면, 개발 도구를 활용하지 못하게 된다.

2. 상태는 읽기 전용 이다.

리액트에서는 state를 업데이트 해야 할 때, setState를 사용하고, 배열을 업데이트 해야 할 때는 배열자체에 push를 직접하지 않고, concat같은 함수를 사용하여 기존 배열은 수정하지 않고 새로운 배열을 만들어서 교체하는 방식으로 업데이트함.

깊은 구조의 객체를 업데이트 할떄도 기존 객체는 건들이지 않고 Object.assign을 사용하거나 spread연산자를 사용하여 업데이트 함.

리덕스에서도 마찬가지이다. 기존 상태를 건들이지 않고 새로운 상태를 생성하여 업데이트해주는 방식으로 하면 개발자 도구를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있다.

리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경 되는 것을 감지하기 위하여 shallow equality검사를 하기 때문이다.

이를 통하여 객체의 변화를 감지 할 때 객체의 깊숙한 안쪽까지 비교를 하는 것이 아니라 겉핥기 식으로 비교를 하여 좋은 성능을 유지할 수 있는 것이다.

3. 변화를 일으키는 함수, 리듀서는 순수한 함수여야 한다.

  • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
  • 이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 변환한다
  • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 한다.

동일한 Input이라면 언제나 동일한 Output이 있어야 한다. 그런데 일부 로직들 중에서 실행 할 때마다 다른 결과값이 나타날 수 있다.

new Date(), 랜덤 숫자생성, 네트워크 요청 등은 순수하지 않은 작업이므로, 리듀서 함수의 바깥에서 처리해줘야함 -> 리덕스 미들웨어

Install

yarn add redux react-redux redux-action

Setting

참고 문서

https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A%94-react-redux-%ED%94%8C%EB%A1%9C%EC%9A%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-1585e911a0a6

https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt