[Pokemon PJ_Day 4] RTK (1) - 세팅하기

필수 과제를 마치고 도전 과제인 RTK를 진행하였다.

 

Context API를 사용한 로직에서 RTK로 바꾸려니 헷갈리는 부분이 많았다.

크게 RTK를 세팅하는 방법과 사용하는 방법으로 정리해보겠다.

이번 글에서는 세팅하는 방법! 

 

---

 

RTK (Redux Toolkit) 란?

리덕스 툴킷은 리덕스를 개량한 것

리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고,
리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷

리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같다.

즉 새로운 것이 아니다. 
리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 일일히 손으로 만들어 줘야 했던 ducks 패턴의 요소들이 어느정도 자동화 되었다.

컴포넌트에서 useSelector를 통해서 사용하는 것은 모두 똑같다.
바뀐 부분은 그저 모듈 파일 뿐이다.

 

 

 

RTK Setting

전체적인 순서는 아래와 같다.

1. 패키지 설치 및 파일 구성
2. 스토어 생성 (configureStore()
3. Slice 생성 (createSlice() / reducer와 actions 정의)
4. 정의한 reducer를 store에 입력하여 store 구성
5. <Provider>로 감싸기, store 주입

 

📍1. 패키지 설치 및 파일 구성

• 리덕스 툴킷 설치 : yarn add @redux.js/toolkit
• RTK는 moudules를 잘 안 쓰기 때문에
  redux 폴더 > silces 폴더 > ~Slices.js

 

 

📍2. 스토어 생성 (configureStore() 사용)

• configureStore은 객체 형태의 인자를 1개 갖는다.
• 인자에는 추후 slice에서 생성한 reducer가 들어온다.

// 객체 형태의 인자 1개
export const store = configureStore({ 인자 });

 

 

 

📍3. Slice 생성 (createSlice() / reducer와 actions 정의)

• initalState 초기값 가져오기

// 보통 로직
const initialState = {
	name: ""
};

// 내가 구성한 로직
const initialState = [];

• createSlice() 사용

// 변수는 action (type, value, creator), reducer가 포함되어있다.
const *변수명 = createSlice({ 내부 객체 })

// 내부 객체
{	name: "이름",
    initialState,
    reducers: {
    	함수명1: (state, action) => {리듀서 내에서 실제 작동시킬 로직};
        함수명2: () => {};
    };
};

• action creator
  • 함수명1, 함수명2 가 곧 action creator
  • action creator를 실행하면 action 객체를 만든다.
  • *변수명의 actions에서 함수를 뽑아서 내보내기

export const { 함수명1, 함수명2 } = *변수명.actions;

• reducer
  • 이전에 생성한 store의 인자로 들어감

export default counterSlice.reducer;

 

 

📍4. 정의한 reducer를 store에 입력하여 store 구성

• store의 인자 자리에 reducer를 주입

const store = configureStore ({   👉🏻내부에 객체
	reducer : {		  👉🏻key 내에 객체(reducer들)	
    	counter: counterSlice,    👉🏻import 시 파일명 확인!
        };
});

 

 

📍5. <Provider>로 감싸기, store 주입

• APP.jsx (최상위 파일)에서 <Provider>로 감싸기
• 만든 store 주입하기

// APP.jsx
const App = () => {
  return (
    <Provider store={store}>
      <Router />
    </Provider>
  );
};

 

 

---

RTK 세팅을 위한 단계를 정리했다.

다음 글에서는 실제 적용한 방법을 바탕으로 RTK 사용 방법을 정리하겠다.