[Redux-Toolkit] ToDoList(1): RTK를 이용한 상태관리!- 스토어, 슬라이스 생성

👀 개요

To Do List의 내용을 다른 페이지에서도 출력할 수 있도록 전역 상태관리가 필요하게 되었다. 리덕스 툴킷을 이용한 리스트 생성과 삭제 과정을 세 가지 파트에 나눠 정리해보았다. 이번 포스팅에서는 스토어 및 슬라이스 생성을 다뤄보려고 한다.
(모달창 구현과 DatePicker를 이용한 날짜 관리는 추후에 따로 업데이트 예정)

📌 순서

1. 스토어 생성
2. 스토어 제공
3. 상태 슬라이스 생성
4. 스토어에 슬라이스 리듀서 추가
5. 리액트 내부에서 리덕스 사용하기
(1) 일정 생성하기
(2) 일정 관리하기

🔎 스토어 생성

src/App/store.js 라는 파일을 생성한다. 아래와 같이 작성하면 Redux 저장소가 생성된다.

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {},
})

export default store;

💈 스토어 제공

스토어가 생성되면 저장소를 가져와 <Provider>로 <Router />를 감싼다.

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import Router from './Router';
import { store } from './App/store';
import { Provider } from 'react-redux';
import './styles/tailwindcss.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router />
    </Provider>
  </React.StrictMode>
);

🔗 상태 슬라이스 생성

슬라이스에서는 3가지 필드 name, initialState, reducers가 반드시 존재해야 한다.

• name: slice의 이름
• initailState: 설정해둔 초기값
• reducers: reducers는 객체를 받고 이 객체는 함수로 이루어져있다. 함수는 state, action 두 매개변수를 받는다. Redux-Toolkit 에서는 return, 전개연산자(...state)를 생략할수 있다. 실제로 상태변경에 쓰일 액션함수라고 생각하면 된다!

나는 리스트를 생성, 리스트를 삭제, checkingList 페이지 에서 쓰일 완료된 일정을 담을 수 있는 총 세 가지 함수를 만들었다.

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

const initialState = {
  toDoList: [],
  doneList: [],
};

// createSlice가 반환하는 값을 toDoListSlice라는 변수에 저장.
const toDoListSlice = createSlice({
  name: 'toDo',
  initialState,
  reducers: {
    // 리스트 생성
    addToDo(state, action) {
      // state에 있는 toDoList에 있는 값을 payload에 있는 값으로 바꿔준다. payload는 action에서 오기 때문에 앞에 action을 붙여준다.
      state.toDoList = action.payload.data;
    },
    // 리스트 삭제
    deleteToDo(state, action) {
      state.toDoList = action.payload.data;
    },
    // 진행 중인 리스트
    progressToDo(state, action) {
      state.doneList = action.payload.data;
    },
  },
});

// action을 export해야 dispatch를 사용할 수 있음. toDoListSlice에 있는 actions를 가져오는 작업.
export const toDoActions = toDoListSlice.actions;
// 결국 reducers의 덩이리를 가져오는 것이기 때문에 reducers가 아닌 reducer로 작성!
export default toDoListSlice.reducer;

🗝 스토어에 리듀서 추가

import { configureStore } from '@reduxjs/toolkit';
import toDoReducer from './toDoListSlice';

const store = configureStore({
  reducer: {
    toDo: toDoReducer,
  },
});

export default store;

참고자료:
Redux-Toolkit 공식문서
'아직도 옛날 리덕스 쓴다고..? 옛날 리덕스를 최신 리덕스 Toolkit으로 바꿔보자!'- 코딩알려주는누나

깃헙 Repo