항해하다/항해 - 4주차

[항해99 4주차] - Redux 개인과제 (4) [툴킷 덮어쓰기]

위르겐 2022. 8. 5. 01:27

 

 

 

지금까지 react-redux로 만든 

투두리스트를 

리덕스 툴킷으로 덮어씌워보자

 

 

툴킷을 앞으로 사용해야하니

익숙해지기 위함인데

 

 

기존의 코드를 뜯어고치고

변경해줘야한다는 막연한 두려움때문에

 

'그냥 새로 만들까...'하다가

이정도 리팩토링도 못하면

나중엔 회피에 대한 대가를 

강하게 치를까 무서워

그냥 시도해봤다.

 

 

생각보다 간단하게 마무리됐다.

 

 

 

import { createStore } from "redux";
import { combineReducers } from "redux";

import todo from "../modules/todos";

const rootReducer = combineReducers({
  todo,
});
const store = createStore(rootReducer);

export default store;

 

 

우선 이렇게 생겨먹은

configstore.js 파일을 

없애버리자

 

 

 

 

 

툴킷은 configstore로 컴포넌트에 연결하는 부분까지

store파일에 다 넣어버리기 때문에

훨씬 간편해진다.

 

 

 

 

이제 툴킷으로 덮어쓴

store파일 전체를 하나하나 뜯어보자

 

 

import { configureStore, createSlice } from '@reduxjs/toolkit'



let nextId =1;

const todos = createSlice ({
  name : 'todos',
  initialState : {
    todo_1: []
  },
  reducers: {
    addTodo: (state, action) => {
      const plusTodo = {
        id: nextId++,
        title:action.payload.title, 
        content:action.payload.content, 
        isDone:false
      }
      state.todo_1.push(plusTodo)
      return state
    },
    deleteTodo: (state, action) => {
      console.log(action)
      const deleteFilter = { ...state, todo_1: state.todo_1.filter(todo => todo.id !== action.payload)}
      return deleteFilter
    },
    toggleTodo: (state, action) => {
      console.log(action)
      const toggleFilter =  { ...state, todo_1: state.todo_1.map(todo => todo.id === action.payload ? { ...todo, isDone: !todo.isDone} : todo)}
      return toggleFilter
    }


  }
})


export let { addTodo, deleteTodo, toggleTodo } = todos.actions;

export default configureStore({
  reducer: {
    todos: todos.reducer,
  },
});

 

 

툴킷엔 

react-redux랑 다르게

createSlice를 import해오는데

 

 

기존엔

Action-Value와

Action-creator

그리고 initialState, reducer까지

 

전부 따로따로 함수를 생성했지만

 

 

툴킷을 이용하면

이 createSlice안에 

전부 집어넣고

하나로 관리할 수 있어서 아주 편해진다.

 

 

const todos = createSlice ({
  name : 'todos',
  initialState : {
    todo_1: []
  },

 

 

createSlice로 지정해준 함수안에

이름을 작명해주고

초기상태값까지 가볍게 지정해준다.

 

 

 

    addTodo: (state, action) => {
      const plusTodo = {
        id: nextId++,
        title:action.payload.title, 
        content:action.payload.content, 
        isDone:false
      }
      state.todo_1.push(plusTodo)
      return state
    },

 

 

reducer에서

CRUD중 

C를 살펴보면

 

기존엔 

ActionCreator에서 위와 같이 

추가할 객체를 지정해줬지만

ActionCreator가 없어졌기 때문에 

reducer의

addTodo함수안에서 지정해준다음 

state.todo_1 (배열)에 

push해주면 Create는 끗!

 

 

    deleteTodo: (state, action) => {
      console.log(action)
      const deleteFilter = { ...state, todo_1: state.todo_1.filter(todo => todo.id !== action.payload)}
      return deleteFilter
    },

 

 

delete에서는 기존과 마찬가지로

filter함수를 이용해 내가 삭제버튼을 클릭한 객체의 아이디와

다른 아이디를 가진 객체만 

반환하여 삭제를 완료해준다.

 

여기서 action으로 받아오는 데이터는 id값이다

 

 

    toggleTodo: (state, action) => {
      const toggleFilter =  { ...state, todo_1: state.todo_1.map(todo => todo.id === action.payload ? { ...todo, isDone: !todo.isDone} : todo)}
      return toggleFilter
    }

 

 

map함수도 마찬가지로 action으로 id값을 받아온 후

클릭한 객체의 isDone이

true면 false로

false면 true로 바꿔주는 토글기능을 구현한 후

state를 그대로 반환해주면

 

update기능까지 끗!

 

 

 

 

 

 

내 기억상으로

컴포넌트를 건드리진 않았던 것 같다.

기존의 react-redux에서 dispatch로 보내준 함수도 전부 그대로였고

store파일만 갈아엎으니 끝났다.

 

 

 

한 파일에 

action value

action creator

initial State

reducer

를 전부 넣는 파일구조를

ducks구조라고하는데

 

 

툴킷에서는

한파일안에서도

createSlice 함수에 전부 집어넣어버리니까

ducks구조를 ducks구조로 축약한 느낌이다.

 

 

 

이제 툴킷도 끝냈는데

내일부터는 미들웨어 비동기통신을 공부해야한다.

 

근데 리덕스공부가 아직 덜 된상황에서

이렇게 빨리 진도를 빼는게 맞는건지

불안하다..

 

그래도 해야지 뭐..

어쩔수있나...

 

 

 

 

반응형