[리액트][리덕스] #4 Redux Toolkit (To Do List 리덕스툴킷) - 초보자를 위한 리덕스 101

버전에 맞춰서 강의와 다른 코드가 있습니다.

 

결과 화면

 

---

Redux Toolkit 기본 개념

• configureStore()

기존 createStore 역할을 대신해 사용한다.

configureStore()는 리듀서 조각들을 자동으로 합쳐주고, 기본으로 제공되는 기능뿐만 아리나 Redux DevTools 확장을 사용할 수 있게 해준다.

 

• createSlice()

기존 reducer에서 switch문 역할을 대신해 사용한다.

초기 state와 리듀서 함수를 작성할 수 있고, array.push와 같은 state를 직접 수정할 수 있다.

state는 mutate 하면 안되는 것이 원칙인데, 리덕스 툴깃이 자동으로 새로운 state로 반환시켜준다.

 

---

 

redux toolkit을 사용하기 위해 터미널에서 yarn add @reduxjs/toolkit 또는 npm install @reduxjs/toolkit 명령어르 실행한다.

 

파일 구조

• src/store/store.js

store를 만든다.

import { configureStore } from '@reduxjs/toolkit'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import rootReducer from './rootReducer'

const persistConfig = {
  key: 'root',
  storage
}

const reducer = persistReducer(persistConfig, rootReducer)

const store = configureStore({
  reducer
})

export default store

 

• src/store/rootReducer.js

rootRedecer를 만든다.

toDos 이외의 reducer를 만들게 되면 rootReducer에 추가한다.

import { combineReducers } from 'redux'
import toDos from './toDoReducer'

const rootReducer = combineReducers({
  toDos
})

export default rootReducer

 

• src/store/toDoReducer.js

reducers 안에 액션을 만든다.

initialState의 toDoList에 toDo를 추가하고, 삭제하는 기능을 만들기 위해 addToDo와 deleteToDo를 만든다.

addToDo 액션에서 unshift()를 통해 배열에 새로운 toDo를 추가하고,

deleteToDo 액션에서 filter()를 통해 id값이 일치하지 않는 나머지 값들만 return해 toDo를 삭제한다.

import { createSlice } from '@reduxjs/toolkit'

const todoSlice = createSlice({
  name: 'reducerToDo',

  initialState: {
    toDoList: []
  },

  reducers: {
    addToDo: (state, action) => {
      state.toDoList.unshift({ id: Date.now(), text: action.payload })
    },
    deleteToDo: (state, action) => {
      state.toDoList = state.toDoList.filter(list => list.id !== action.payload)
    }
  }
})

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

 

• src/routes/Home.js

useSelector()로 스토어에 있는 todoList state를 가지고 온다.

dispatch를 통해 reducers에 만들어 놓은 액션을 가지고 온다.

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addToDo } from '../store/store'
import ToDo from '../components/ToDo'
import './home.scss'

function Home() {
  // ** Hooks
  const dispatch = useDispatch()

  // ** States
  const [text, setText] = useState('')

  // ** Redux States
  const toDos = useSelector(state => state.todoList)

  function onChange(e) {
    setText(e.target.value)
  }

  function onSubmit(e) {
    e.preventDefault()
    dispatch(addToDo(text))
    setText('')
  }

  return (
    <>
      <div className="layout home">
        <h1>To Do List</h1>

        <form onSubmit={onSubmit}>
          <input type="text" value={text} onChange={onChange} placeholder="What is your to do?"/>
          <button>Add</button>
        </form>

        <ul>
          {
            toDos.map((toDo, index) => {
              return (
                <ToDo id={toDo.id} text={toDo.text} key={index}/>
              )
            })
          }
        </ul>
      </div>
    </>
  )
}

export default Home