[Redux] Redux-toolkit 사용법(완전 쉬움)

Redux-toolkit은 완전 구세주이다. 갓!!! 

전역에서 사용해야 하는 state를 사용할 때 사용하기에 아주 완벽하다. 굳이 미리 공부할 필요는 없고, props로 주고 받는 관계에 대해 지치고, 너무 불편함을 느끼고 있다면 이제는 공부해야할 때라고 생각한다. 

 

 

등장 이유

---

1. react-redux는 설정해야할 것이 너무 많았기 때문에(1번이라도 사용해본 사람은 알거다..)

2. 미들웨어 사용 시 설치해야할 것이 너무 많았기 때문에

3. 반복되는 코드 작성을 줄이기 위해

4. 불변성을 유지하기 어려웠기 때문에(이전에는 spread 연산자를 사용하여 복제 후 사용했다.)

 

 

 

설치 방법

---

위와 같은 이유로 redux-toolkit이 등장하게 되었다. 

npm install @reduxjs/toolkit

728x90

반응형

 

 

 

사용방법

---

1. createSlice 생성하기

createSlice를 import하고, createSlice 인자로 객체를 주는데, 이 때 키로 name, initialState, reducers는 반드시 줘야한다. name에는 사용하고 싶은 slice명, initialState에는 초기값, reducers에는 action들을 적어주면 된다. 

import { createSlice } from '@reduxjs/toolkit';

interface IInitialState {
  setNickname: string;
  isDuplicate: boolean;
}

const initialState: IInitialState = {
  setNickname: '',
  isDuplicate: false,
};

export const myPageSlice = createSlice({
  name: 'myPage',
  initialState: initialState,
  reducers: {
    setNickname: (state, action) => {
      state.setNickname = action.payload;
    },
    isDuplicate: (state, action) => {
      state.isDuplicate = action.payload;
    },
  },
});

여기서 action.payload에는 추후에 dispatch를 사용할 때 괄호 안에 담기는 값이다. 이 부분은 밑에서 한 번 더 설명할거다. 

 

 

2. slice를 생성했으면 이제 해당 slice를 store에 등록해야한다. 

configureStore는에는 각각의 slice를 모아주면 된다. 

import { configureStore } from '@reduxjs/toolkit';

import { myPageSlice } from './slices/myPageSlice';

export const store = configureStore({
  reducer: {
    // slice name : import한 slice명
    myPage: myPageSlice.reducer,
  },
});

 

3. 변경된 값을 저장할 때는 dispatch를 사용하고, 저장된 값을 확인할 때는 selector를 사용한다. 

import { useDispatch, useSelector } from 'react-redux';

const dispatch = useDispatch();
dispatch(myPageSlice.actions.setNickname('judy'));
const selector = useSelector((state) => state.myPage.setNickname);

console.log(selector) // judy

위에서 짧게 설명했던 setNickname의 action.payload 값에는 작성한 'judy'값이 담기게 되는 것이다. 

 

 

 

 

참고자료

---

• https://redux-toolkit.js.org/introduction/getting-started
• https://www.youtube.com/watch?v=9wrHxqI6zuM

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖