Redux

[TOC]

🎉What is Redux?

상태를 관리해주는 API이며, 최근 React와 접목해서 뜨고 있는 추세라 Redux하면 React만 사용할 수 있을 것 같지만, Redux는 Node 모듈이라 JS 기반으로하는 모든 프레임워크는 사용가능합니다.

간단한 프로그램을 예로 들면…

아래의 프로그램은 사용자의 버튼 클릭 이벤트를 통해서 add, minus이벤트를 발생 시켜 count의 값을 변경하는 예제이다.

const add = document.getElementById('add')
const minus = document.getElementById('minus')
const number = document.querySelector('span')

let count = 0
number.innerText = count  

const updateText = () => {
  number.innerText = count  
}

const handleAdd = () => { 
  count = count + 1
  updateText()
}
const handleMinus = () => {
  count = count - 1
  updateText()
}

add.addEventListener('click', handleAdd)
minus.addEventListener('click', handleMinus)

  <body>
    <button id="add">Add</button>
    <span>0</span>
    <button id="minus">Minus</button>
  </body>

간단하게 코드에 대해 설명하면, html에 있는 add, minus버튼을 클릭하면 각각 요청에 맞게 count를 수정합니다.

하지만 이렇게 하면 데이터를 수정 할때마다 렌더링이 발생하고, 코드가 길어질수록 관리하기도 힘들어집니다.

Redux의 가장 큰 장점을 예로 들면 MVC 패턴의 단점인 양방향 데이터 흐름으로 관리가 복잡한 부분을 store에서 관리하기 때문에 state관리를 수월하게 도와 줍니다.

🎉How to use Redux?

위 Vanilla JS에 Redux를 통해야만 state변경 할 수 있도록 변경했다.

import { createStore } from 'redux'
const add = document.getElementById('add')
const minus = document.getElementById('minus')
const number = document.querySelector('span')


const countModifier = (count = 0, action) => {
  if (action.type === 'ADD')
    return count + 1
  else if (action.type === 'MINUS')
    return count - 1
  else
    return count
}
const countStore = createStore(countModifier)
const onChange = () => {
  number.innerText = countStore.getState()
}

countStore.subscribe(onChange)


const addHandler = () => {
  countStore.dispatch({ type: 'ADD' })
}

const minusHandler = () => {
 countStore.dispatch({ type: 'MINUS' })
}

add.addEventListener('click', addHandler)
minus.addEventListener('click', minusHandler)

createStore에 인자 값으로 Reducer를 줘야하며, Reducer를 통해서야만 state를 변경할 수 있다.

Reduer는 사용자의 이벤트를 통해, 변경될 state를 dispatch에 객체로 받아서 Reducer에 미리 작성된 프로세스 데로 처리한다.

이 때 데이터를 무조건 Object 안에 type이 있어야 한다.(아니면 error 발생)

event listener => dispatch(with type object) => onChange => Reducer

📌Reducer는 mutate 즉 데이터를 변환하는 것을 지양합니다. 여기서 mutate란 array.push(blabla)같은 데이터를 변형하는 건데, JS는 원시적 타입(Number, String, Object 등)을 제외한 모든 것이 객체이기 때문에 데이터가 바뀌었는지 확인 하는 방법이 데이터를 참조하고 있는 주소값이 바뀌었는지를 확인해 Re-Rendering 합니다.

🎉What is Redux Toolkit?

state를 관리하기 편하기 위해 사용하는 Redux가 막상 사용해보니 작성해야 하는 코드들 때문에 사용하기 더 복잡하다는 의견들이 생겨났습니다.

yarn add @reduxjs/toolkit
npm install @reduxjs/toolkit

Toolkit은 가동성 및 코드작성에 많은 도움을 줍니다.

// Original Redux
const ADD = 'ADD'
const DEL = 'DEL'
const addToDo = (text) => {
  return {
    type: ADD,
    text
  }
}

const deleteToDo = (id) => {
  return {
    type: DEL,
    id: parseInt(id)
  }
}

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [{ text: action.text, id: Date.now() }, ...state]
    case DEL:
      return state.filter((toDo) => toDo.id !== action.id)
    default:
      return state
  }
}

기존의 Redux에서는 type의 통일도 없고 간단한 프로그램을 만드는데도 중복인 코드가 많았었습니다.

편리하기 위해서 사용하는데 역설적이게도 불편한 상황입니다.

하지만 Toolkit을 이용하면 아래와 같이

import { createAction, createReducer } from '@reduxjs/toolkit'

// ToolKit
const addToDo = createAction('ADD')
const deleteToDo = createAction('DEL')

const reducer = createReducer([], {
  [addToDo]: (state, action) => {
    state.push({ text: action.payload, id: Date.now() })
  },
  [deleteToDo]: (state, action) => 
    state.filter((toDo) => toDo.id !== parseInt(action.payload))
})

간단한 코드로 바뀌었습니다.

state를 return하는 함수를 따로 만들지 않아도 createAction()을 할당후 호출하면

{type: 'ADD', payload: 'blabla'}

JSON형식으로 state를 출력해 줍니다! 여기서 기존의 Redux와 다른 점은 각기 다른 이름의 state를 사용하지 않고 payload라는 이름으로 state를 전달해 주게 됩니다

또 switch-case문을 사용하지 않아도 되는 장접이 있어서 코드가 간결해지고,

가장 중요한 부분인데 state.push를 하면 mutate가 돼서 오류가 발생해야 하지만 node package중에 immer라는 엄청난 패키지가 있는데 깊은 복사를 제공해주어서 spread연산자나, 개발자가 일일히 복사해주어야 하는 번거러움을 대신 해줍니다.

또 기존의 return으로 값을 넘겨주는 방식도 그대로 제공하니 원하는 방법을 사용해도 되지만! return을 할경우 기존과 동일하게 non-mutate를 지향하기 때문에 new mutate를 return해야합니다.

하.지.만 여기서 더 편한 기능을 toolkit은 제공하고 있습니다.

const addToDo = createAction('ADD')
const deleteToDo = createAction('DEL')

const reducer = createReducer([], {
  [addToDo]: (state, action) => {
    state.push({ text: action.payload, id: Date.now() })
  },
  [deleteToDo]: (state, action) => 
    state.filter((toDo) => toDo.id !== parseInt(action.payload))
})
const store = createStore(reducer)

export const actionCreator = {
  addToDo,
  deleteToDo
}

기존에는 createAction을 통해서 action을 만들고, reducer에 state마다 일일히 입력해 줘야 했는데

const toDos = createSlice({
  name: 'toDosReducer',
  initialState: [],
  reducers: {
    add: (state, action) => {
      state.push({ text: action.payload, id: Date.now() })
    },
    remove: (state, action) => 
      state.filter((toDo) => toDo.id !== parseInt(action.payload))
  }
})

const store = configureStore({ reducer: toDos.reducer })
export const { add, remove } = toDos.actions

createSlice를 이용하면 reducer, action을 한번에 선언, 할당이 가능하다

toolkit 사용 전

import { createStore } from 'redux'

const ADD = 'ADD'
const DEL = 'DEL'

const addTodo = (text) => {
  return {
    type: ADD,
    text
  }
}

const deleteTodo = (id) => {
  return {
    type: DEL,
    id: parseInt(id)
  }
}

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [{ text: action.text, id: Date.now() }, ...state]
    case DEL:
      return state.filter((toDo) => toDo.id !== action.id)
    default:
      return state
  }
}

export const actionCreator = {
  addTodo,
  deleteTodo
}

const store = createStore(reducer)

export default store 

toolkit 사용 후

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

const toDos = createSlice({
  name: 'toDosReducer',
  initialState: [],
  reducers: {
    add: (state, action) => {
      state.push({ text: action.payload, id: Date.now() })
    },
    remove: (state, action) =>
      state.filter((toDo) => toDo.id !== parseInt(action.payload))
  }
})
export const { add, remove } = toDos.actions
export default configureStore({ reducer: toDos.reducer })

Reference

노마드 코더 Redux 무료강의

https://nomadcoders.co/redux-for-beginners/lobby