Redux 와 Redux-Toolkit을 간단하게.araboja

공포의 리덕스

 

리덕스툴킷을 이해하기 위해서는 리덕스가 어떤건지는 알아야한다.

 

리덕스란?

리액트의 상태관리 라이브러리이다.

리액트는 단방향데이터 바인딩이기 때문에 상태관리가 까다롭다.

props drilling을 사용하거나 context등 상태관리 방법에는 여러가지가 있지만

리덕스를 활용하면 Store라는 공간에 모든 State를 때려박고 꺼내쓰면 되기때문에 전역상태관리가 간편해진다.

다만 리덕스를 사용하게 되면 코드가 복잡해지고 코드량이 많아지기때문에 소규모 프로젝트에서 사용하는것보다 주로 큰단위 프로젝트에서 사용한다.

 

기존 리액트 상태관리

---

 

리덕스

 

 

 

리덕스 기본용어

 

Store 

컴포넌트 상태를 관리하는 저장소. 

Action

스토어의 상태를 변경하려면 액션을 생성해야한다. 액션은 객체이고 반드시 type을 가져야한다.

액션 객체는 액션 생성함수에 의해서 만들어진다.

Reducer

현재 상태와 액션 객체를 받아서 새로운 상태를 리턴하는 함수

Dispatch

스토어의 내장 함수이고, 액션 객체를 넘겨줘서 상태를 업데이트 시켜주는 역할을 한다.

Subscribe

스토어의 내장 함수. 리듀서가 호출될 때 Subscribe된 함수 및 객체를 호출한다.

 

흐름:

이벤트 발생 -> Dispatch -> Action -> Store -> Reducer -> 새로운 State 저장 -> Subscribe -> 새로 렌더링

 

 

리덕스 흐름

 

 

---

 

 

리덕스 툴킷이란?

기존 리덕스를 사용하기 위해서 따로 설치해야하는것도 있고, 준비과정과 코드량이 많았기 때문에 준비과정과 사용법을 완화 시킨 버전이다.

 

어떻게 줄어든 느낌이냐면 

1. configureStore를 사용하여 코드를 줄일수있다.

2. createAction을 사용하여 action을 더 간결하게 만든다, type만 넣어줘도 알아서 type을 가진 action object를 생성해준다.

3. createReducer를 사용하여 기존 reducer를 사용할때 switch등의 조건문으로 action의 type을 구분하는것, default를 항상 명시해야 하는것을 안할수있다.

4. createSlice를 사용할때 name, initialState, reducers를 설정한다면 Action을 선언하고 해당 Action이 dispatch 되면 바로 state를 가지고 해당 action을 처리한다.

 

 

리덕스 툴킷의 사용방법은 다음글에서 소개하겠다.