Redux Toolkit + Redux Saga 구조 만들어보기(1) - 개념, 설치

[Redux Toolkit 이란?]

1. Redux Toolkit를 사용하는 이유

Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식적으로 제공하는 개발도구 입니다.

 

Toolkit 없이 Redux를 사용시 문제점

• "Redux 저장소 구성이 너무 복잡합니다."
• "Redux가 유용한 일을하도록하려면 많은 패키지를 추가해야합니다."
• "Redux에는 너무 많은 상용구 코드가 필요합니다."

Ex) ---------------------------------------------------------------------------------------------------------------

1개의 액션 생성을 하기위해선 [액션타입 정의 > 액션함수 생성 -> 리듀서 정의] 이렇게 3가지의 과정이 필요하며 그 외에

많아지는 액션을 관리하기 위해 redux-actions

불변성 보존을 위한 immer

store값을 효율적으로 핸들링하여 리렌더링을 막기 위한 reselect

비동기 작업을 휘한 thunk,saga 등

리덕스의 유효한 기능을 사용하기 위해 4~5의 라이브러리를 사용한다. 

--------------------------------------------------------------------------------------------------------------------

 

위와 같은 문제점을 Redux Toolkit를 사용하면 saga를 제외한 위의 모든 기능을 제공한다.

 

 

Redux Toolkit 특징 

Redux Toolkit 특징

• Simple : 스토어 설정, 리듀서 생성, 변경 불가능한 업데이트 로직 등과 같은 일반적인 사용 사례를 단순화하는 유틸리티가 포함되어 있습니다.
• Opinionated : 스토어 설정을 위한 좋은 기본값을 제공하며 가장 일반적으로 사용되는 Redux addon이 내장되어 있다
• Powerful : Immer 및 Autodux와 같은 라이브러리에서 영감을 얻어 "변형" 로직으로 불변성 업데이트 논리를 작성하고 state 전체를 slice로 자동으로 생성 할 수도 있습니다.
• Effective : 적은 코드로 많은 작업이 가능합니다.

 

Redux toolkit에 포함되는 것

• configureStore() 함수는 단순화 된 구성 옵션을 제공합니다 . 슬라이스 리듀서를 자동으로 결합하고 제공하는 Redux 미들웨어를 추가하고, 기본적으로 redux-thunk를 포함하며 Redux DevTools Extension을 사용할 수 있습니다.
• createReducer()유틸리티는 switch 문을 작성하지 않고 reducer함수를 작성할 수 있도록 합니다. 또한 immer 라이브러리를 사용하여 state.todos [3] .completed = true와 같은 일반적인 코드로 더 간단하게 불변성을 유지하면서 상태를 업데이트할 수 있습니다.
• createAction() 유틸리티는 주어진 action type에 따라 action create함수를 반환합니다. 함수 자체에toString()이 정의되어 있으므로 별도의 상수를 선언할 필요 없이 함수 이름을 사용할 수 있습니다.
• createSlice() 함수 리듀서 함수 세트로서, 슬라이스 이름 및 초기 상태 값을 받아서 자동으로 slice reducer와 action creator, action types를 생성합니다.
• createSelector()유틸리티는 Reselect 라이브러리를 사용하기 쉽도록 re-export한 것입니다.

참고 : redux-toolkit.js.org/

 

Redux Toolkit | Redux Toolkit

[설치]

처음 시작일때는

npx create-react-app my-app --template redux

 

기존 코드에 toolkit를 적용하려면

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

 

[도움 받기]

 #redux 채널은 Redux 학습 및 사용과 관련된 모든 질문에 대한 공식 사이트 입니다. 

Join the Reactiflux Discord Server!

 

[Redux Saga 란?]

1.Redux Saga를 사용하는 이유

Redux Saga란 redux를 사용할 때 특정 리듀스 액션을 관찰하고 있다가, 그 액션이 실행되면서 동시에 다른 행동을 취할 수 있게 해주는 함수이다.

 

비동기 처리를 해야하는 코드가 늘어날수록 관리는 매우 어렵고 복잡해진다.

React는 View를 담당하고 Redux는 데이터를 핸들링하는데 이 복잡한 로직을 어디에 어떻게 넣고 관리하며 쉽게 핸들링하는 미들웨어가 바로 Redux-Saga 이다.

 

saga는 어플리케이션에서 오로지 사이드 이펙트에만 반응하도록 만들어진 별도 쓰레드 같다고 할 수 있다. (리덕스 액션으로 시작,중단,취소 될 수 있고 또한 redux의 모든 상태값에 접근이 가능하며 redux액션들을 dispatch할 수도 있다.)

 

비슷한 라이브러리는 Redux-Thunk 가 있고 Saga가 좀 더 러닝 커브가 존재한다. 

Saga와 Thunk 모두 미들웨어로 같은 역할을 하지만 Redux-Saga에서만 가지고 있는 개념(제너레이터, 이펙트)이 있다.

 

※ 미들웨어

양 쪽을 연결하여 데이터를 주고받을 수 있도록 중간에서 매개 역활을 하는 것을 의미

React는 Redux 액션을 수행하면 Redux-Saga에서 디스패치하여 Redux의 액션을 가로챈다

중간에 가로챈 액션의 역활을 수행 후 다시 액션을 발행하여 데이터를 저장하거나 다른 이벤트를 수행시킨다.

 

※ 제너레이터

redux-saga는 비동기 플로우를 쉽게 읽고, 쓰고, 테스트할 수 있도록  ES6의 Generator라는 개념을 사용한다. 이 Generator를 차용한 덕분에 비동기 코드가 마치 스탠다드한 동기 코드처럼 보여진다. (마치 async/await과 같지만 더 멋진 점들이 많다.) redux-thunk와 다르게 콜백 지옥에 빠질 일도 없고, 비동기 로직을 쉽게 테스트할 수 있으며, 액션들을 순수한 상태로 둘 수 있다.

Saga는 Generator를 이용하여 모든 것을 수행한다. 그렇기 때문에 Generator를 이해하지 못하면 Saga를 이해못한 것이나 다름없다. 

Generator Function은 function* FunctionName() {} 이런식으로 쓰이는데 , 쉽게 말하자면 yield 가 나오기 전 까지 실행되다가 yield에 해당하는 값을 return 하고 (함수면 호출하고) next()을 기다리는 함수이다.

 

※ 이펙트

이펙트는 이벤트를 처리할 내용을 담고 있다. Redux-Saga에서는 이러한 이펙트 들을 yield를 이용하여 호출하고 수행된 내용을 다시 돌려 받아 그 다음 액션들을 수행한다. 결국 Redux-Saga는 제너레이터를 통해 이펙트를 수행하는 역활을 한다고 볼 수 있다. 대표적인 것들로는 take, call, put 등이 있다.

 

 이펙트 함수 종류로는

• call : 함수를 동기적으로 실행
• all : 매개변수 배열안에 있는 함수들을 실행
• fork : 함수를 비동기적으로 실행
• takeLatest : 짧은 시간내에 액션이 관측되면 그 액션이 들어온 맨 마지막 것만 받아들여서 실행
• delay : 매개변수에 있는 시간만큼 잠깐 멈춤
• put : dispatch() 와 동일

 

Saga 동작원리

[설치]

npm i redux-saga