[240520 TIL] Redux

오늘은 전역 상태관리 라이브러리인 Redux 그리고 사용성을 강화한
Redux Toolkit 의 기본에 대해 정리해보려고 합니다.

1. Redux 설치

먼저 필요한 패키지를 설치합니다.

npm install @reduxjs/toolkit react-redux

2. 기본적인 파일 구조

src/
├── store/
│   ├── todoSlice.ts
│   └── store.ts
├── App.tsx
└── index.tsx

3. store.ts 설정

store.ts` 파일을 생성하고 다음과 같이 설정합니다.

// store.ts
import { configureStore } from '@reduxjs/toolkit';
import todoSlice from './todoSlice';

export const store = configureStore({
  reducer: {
    todos: todoSlice,
  },
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

4. slice.ts 설정

todoSlice.ts` 파일을 생성하고 다음과 같이 설정합니다.

// todoSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState } from '../../app/store';
import { ToDo } from "../d";

interface ToDoState {
    toDos: ToDo[];
}

const initialState: ToDoState = {
    toDos: []
};

const todoSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addToDo: (state, action: PayloadAction<ToDo>) => {
        state.toDos.push(action.payload);
    },
    deleteToDo: (state, action: PayloadAction<string>) => {
        state.toDos = state.toDos.filter(
            (todo) => todo.id !== action.payload
        );
    },
    toggleIsDone: (state, action: PayloadAction<string>) => {
        const todo = state.toDos.find((todo) => todo.id === action.payload);
        if (todo) {
        todo.isDone = !todo.isDone;
        }
    },
  },
});

export const { addToDo, deleteToDo, toggleIsDone } = todoSlice.actions;
export default todoSlice.reducer;

5. Counter 컴포넌트 설정

.tsx` 파일을 생성하고 다음과 같이 설정합니다.

// TodoContainer.tsx
import { useDispatch, useSelector } from "react-redux";
import "../../App.css";
import { ToDo } from "../../d";
import { AppDispatch, RootState } from "../../store/store";
import {
addToDo,
deleteToDo,
fetchToDos,
toggleIsDone,
} from "../../store/todoSlice";
import CardList from "../CardList";
import Form from "../Form";import { useEffect } from "react";

const TodoContainer: React.FC = () => {
    const dispatch: AppDispatch = useDispatch();
    const { toDos, loading, error } = useSelector(
        (state: RootState) => state.toDos
    );

//...하략...

6. main.tsx 설정

src/main.tsx 파일에서 Redux Store를 Provider로 감싸줍니다.

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './app/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

이제 애플리케이션을 실행하면 기본적인 Redux Toolkit을 사용한 전역 상태 관리를 확인할 수 있습니다.
필요한 경우 더 복잡한 상태 관리 및 비동기 작업을 추가할 수 있습니다.