🗓 Redux toolkit으로 todo list 만들기

🔎 Redux toolkit이란 ?

상태관리를 위한 라이브러리입니다.

react는 props 형태로 컴포넌트 간 상태를 공유합니다. 하지만 자식 컴포넌트끼리는 상태 공유가 불가능하고, 컴포넌트가 많아질 경우 여러 컴포넌트를 거쳐 props가 전달되는 props drilling이 발생하기도 합니다.

프로젝트의 규모가 커질수록 상태관리는 더 어려워지는데, 이러한 문제점을 해결하고자 전역적으로 상태를 관리하는 상태관리 라이브러리를 사용합니다.

Redux toolkit은 Redux의 작업을 단순화하여 기존의 복잡한 사용 방식과 비대한 보일러 플레이트 문제 등을 해결한 상태관리 라이브러리입니다.

💻 사용 방법

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

redux toolkit을 사용하기 위해서는 store.js 파일을 생성하여 상태를 관리하는 store를 만듭니다.

import { Provider } from "react-redux";
import App from "./App";
import { store } from './store';

const Homework = () => {
  return (
    <>
      <Provider store={store}>
        <App />
      </Provider>
    </>
  );
};

export default Homework;

전역에서 상태를 공유하기 위해 App을 Provider로 감쌉니다.

📍 store의 state 가져다쓰는 법

const initialState: initialState = {
  todos: [{id: 1, title: '할 일'}]
}

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
  }
})

export const store = configureStore({
  reducer: {
    getTodos: todosSlice.reducer
  }
})

createSlice()는 slice를 만드는 역할을 합니다. name은 slice를 생성할 때 내부적으로 중복을 피하기 위해서 사용하는 이름, initialState는 초기 상태값, reducer는 상태 변화를 처리하는 함수입니다.

configureStore()에는 slice 등록해 전역에서 상태관리를 할 수 있습니다.

const todos = useSelector((state: ReturnType<typeof store.getState>) => state.getTodos.todos)

컴포넌트에서 useSelector를 사용해 store에 있던 slice를 호출해 데이터를 읽을 수 있습니다.

📍 store의 state 변경하는 법

const todosSlice = createSlice({
  name: 'todos',
  initialState,
  reducers: {
    addTodo: (state, action: PayloadAction<string>) => {
      state.todos = [
        {id: Date.now() , title: action.payload},
        ...state.todos
      ]
    },
    deleteTodo: (state, action: PayloadAction<number>) => {
      state.todos
      = state.todos.filter(todo => todo.id !== action.payload)
    }
  }
})

export const {addTodo, deleteTodo} = todosSlice.actions

reducer는 상태의 변경 사항을 결정하고 업데이트 된 상태를 반환하는 함수입니다. reducer를 통해 store의 내부 상태를 업데이트합니다.

todoSlice의 reducer에 todo를 추가하는 addTodo 함수와, 삭제하는 deleteTodo 함수를 만들었습니다.

reducer를 전역에서 사용하기 위해서는 slice의 이름뒤에 .actions를 붙여 export 합니다.

const dispatch = useDispatch()

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    dispatch(addTodo(input))
    setInput('')
  }

상태변경을 원하는 컴포넌트에서 useDispatch를 사용해 Action을 전달하면

짜잔 ! todo가 성공적으로 추가되고 삭제되네요 ㅎㅎ