React(60) Redux-toolkit 사용하기

 

 

 

 

 

 

리덕스 툴킷은 리덕스를 편하게 사용하기 위한 리덕스공식 개발 도구이다.

여태까지 리덕스를 잘 사용하기 위해서는 4~5개의 라이브러리를 함께 사용해야 했다.

하지만 Redux Toolkit 은 내장된 기능으로 saga를 제외한 나머지 라이브러리를 대체할 수 있다.

• redux-actions (많아지는 액션을 관리하는 라이브러리)
• immer (상태값의 불변성 보존을 위한 라이브러리)
• reselect (store값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위한 라이브러리)
• redux-thunk (액션을 비동기적으로 만들수있는 라이브러리)
• redux-saga

 

 

---

React(60) Redux-toolkit 이란

쉽게 말해서 기존 리덕스는 사용되는 코드가 많았다. (액션타입도 적어주고... 액션도 작성하고 리듀서에 이것저것... 잔뜩)

내가 느낀 리덕스 툴킷은 코드가 획기적으로 줄어들어든다는게 가장 와닿았다.

 

 

순수 리덕스 코드와 비교해보시려면 아래 포스팅 클릭↓↓↓ (얘를 옆에 띄워놓고 비교해 보시는 걸 추천합니다.)

React(57) Redux 로 객체배열 저장하기 (redux 상태관리)

 

redux/Types.ts

일단 준비물로 댓글의 객체 타입을 선언해주자.

export interface Reply { // 댓글의 객체 타입을 선언 
  id?: number; 
  reply: string; 
  createdAt?: string; 
  updatedAt?: string; 
  deletedAt?: string; 
}

 

redux/Reducer.ts

createSlice는 action과 reducer를 전부 가진 함수이다.

액션 타입은 따로 선언해주지 않아도 자동으로 생성된다. ( 'name/리듀서method이름' 으로 만들어진다. )

import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { Reply } from 'reply/Types';

const initialState: Reply[] = [];	// 초기값 선언

export const replySlice = createSlice({	// 액션 + 리듀서를 한방에 선언할 수 있다
  name: 'reply',			// 이름 넣어주고 
  initialState,				// 초기값 넣어주고
  reducers: {				// 리듀서는 액션 하나하나 모여서 구성된다
    initReply : state => {				    // 댓글을 초기화 하는 액션
      state.replies = [];
    },
    setReply : (state, action: PayloadAction<Reply[]>) => { // 댓글값을 넣어주는 액션
      state.replies = action.payload;
    }
  },
});

export const {
  initReply, setReply			// 리듀서 안의 액션들만 모아 
} = replySlice.actions; 	        // replySlice.action 안에 넣어주자

export const replyActions = replySlice.actions; // 이 액션들을 replyAction 으로 한방에 모아서 선언!
export default replySlice.reducer;		// 리듀서 자체가 이렇게 선언된다

 

configureStore

configureStore는 combineReducers 로 리듀서들을 모아 묶어줄 필요가 없다.

그냥 안에 reducer 속성을 넣고 리듀서 함수를 넣어주면 된다.

또한 얘는 Redux DevTools와 리덕스 미들웨어를 포함하기 때문에, 세팅을 위한 코드를 추가할 필요없이 미들웨어가 있다면 뒤이어 추가만 해주면 된다.

import { configureStore } from '@reduxjs/toolkit';
import { replySlice.reducer } from 'redux/Reducer'

export const store = configureStore({
  reducer: {
    reply: replySlice.reducer,  // replySlice.reducers 를 설정하면
  },			 	// replySlice.reducer 가 자동으로 설정된다.
});