[React.js]Redux 적용하기

Redux에 대해서 먼저 알아보자!

 

Redux는 

전역 상태를 관리하기 위한 단일 스토어를 사용하는 라이브러리.

앱에서 일어난 일을 기반으로 일반 객체 액션을 스토어에 디스패치하여 상태를 업데이트 한다.

이 과정에서 불변성을 유지하면서 업데이트된 상태를 반환하는 순수 리듀서 함수를 사용한다.

(  리듀서 / Reducer는 현재상태와 액션을 받아서 다음 상태를 반환하는 순수 함수. )

 

 

Redux 코드에는

액션 생성자,

미들웨어,

Thunk함수,

정규화된 상태,

Reselect 라이브러리를 사용하는 메모제이션된 셀렉터 함수,

Redux DevTools 확장 프로그램, 

TypeScript 타입 등이 포함 될 수 있다.

 

( 미들웨어 / Middleware는 액션을 디스패치/액션 객체를 스토어로 전달 했을 때

  리듀서에서 상태를 변경하기 전에 사전에 지정된 작업을 수행하는 함수

  미들웨어는 액션을 가로채서 액션을 수정하거나, 

 특정 조건일 때만 액션을 실행하거나,

 네트워크 요청을 보내는 등

 다양한 기능을 수행할 수 있다. )

 

또한 Redux는 React-Redux 라이브러리와 함께 사용되어 React컴포넌트가 Redux store와 상호 작용할 수 있게 한다.

 

Redux 코어는 Redux의 핵심이 되는 작고 간결한 라이브러리.

Redux의 기본 개념과 데이터 흐름 구조를 구현하는데 필요한 API를 제공.

 

• createStore: Redux 스토어를 생성하는 함수.
• combineReducers: 여러 개의 리듀서를 하나의 큰 리듀서로 결합하는 함수.
• applyMiddleware: 여러 개의 미들웨어를 스토어 인핸서(enhancer)로 결합하는 함수.
• compose: 여러 개의 스토어 인핸서를 하나의 스토어 인핸서로 결합하는 함수.

이를 통해 전역 상태를 쉽게 관리하고 React 컴포넌트 간 데이터 전달을 할 수 있다!!!

(

  인핸서/enhancer는 createStore함수에서 사용되며, store을 생성할 때 store의 기능을 강화한다.

  Redux에서는 applyMiddleware 함수를 통해 여러 개의 미들웨어를 결합한 후 

  createStore 함수의 세번 째 인자로 전달하  여 store를 생성한다.

  이 때 applyMiddleware 함수가 스토어 인핸서를 반환하게 된다.

  store enhancer는 createStore 함수에서 리듀서와 함께 사용하여 store를 생성한다.

)

 

 

---

근데 여기서 Redux Toolkit은 또 뭐냐?

 

우선 Redux Toolkit과 Redux store은 다르다.

 

Redux ToolKit은 Redux 개발을 위한 도구 모음이다.

저장소 준비, 리듀서 정의, 불변 업데이트 로직, 액션 생산자나 액션 타입을 직접 작성하지 않고도 

전체 상태 "조각"을 만들어내는 기능까지 

대부분의 Redux 사용 방법에 해당하는 유틸리티 함수들이 들어 있다.

 

configureStore():

createStore를 감싸서 쓸만한 기본값들과 단순화된 설정을 제공.

리듀서 조각들을 자동으로 합쳐주고, 기본 제공되는 redux-thunk를 포함해서 여러분이 지정한 미들웨어들을 더해주고, Redux DevTools 확장을 사용할 수 있게 한다.

createReducer(): 

switch 문을 작성하는 대신, 액션 타입과 리듀서 함수를 연결해주는 목록을 작성하도록 한다.

createAction(): 

주어진 액션 타입 문자열을 이용해 액션 생산자 함수를 만들어준다. 

함수 자체에 toString() 정의가 포함되어 있어서, 

타입 상수가 필요한 곳에 사용할 수 있다.

createSlice(): 

조각 이름과 상태 초기값, 리듀서 함수들로 이루어진 객체를 받아 

그에 맞는 액션 생산자와 액션 타입을 포함하는 리듀서 조각을 자동으로 만들어준다.

createAsyncThunk: 

액션 타입 문자열과 프로미스를 반환하는 함수를 받아, 

pending/fulfilled/rejected 액션 타입을 디스패치해주는 thunk를 생성.

createEntityAdapter: 

저장소 내에 정규화된 데이터를 다루기 위한 리듀서와 셀렉터를 만들어준다.
createSelector 유틸리티를 Reselect 라이브러리에서 다시 익스포트해서 쓰기 쉽게 해준다.

---

실 프로젝트에 사용해보기!

아래는 Redux를 사용하여 도서 목록을 렌더링하고 장바구니에 책을 추가한 기능을 구현한 코드!

---

설명출처: https://ko.redux.js.org/

Redux - 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너. | Redux