Redux

Redux : Store를 통한 예측 가능한 상태 관리 라이브러리

React만을 이용해서 상태를 관리하는 것은 한계를 가지고 있다. 몇개 되지 않는 상태를 다루는데는 크게 복잡함이 없이만, 이 상태가 무지막지하게 많아진다면 상태를 다루는데 있어 매우 복잡해질 것이다. 그래서 등장한 것이 바로 Redux이다. Redux는 다음과 같은 상황에서 사용하기에 적합하다.

• 앱의 여러 위치에서 필요한 많은 양의 상태가 있다.
• 상태가 시간이 지남에 따라 자주 업데이트 된다.
• 해당 상태를 업데이트하는 논리가 복잡하다.
• 규모가 큰 코드베이스를 가지고 있고 많은 사람이 작업을 한다.

위 같은 상황을 마주한다면 Redux는 개발에 있어서 큰 도움이 될 것 이다. Redux는 전역 상태를 관리하는데 도움이 된다.

💻 기본 개념

Action

Action : 어플리케이션에서 일어난 일을 설명하는 이벤트

상태에 변화가 일어나면, 액션이라는 것을 발생시킨다. 이는 하나의 객체로 표현되고 액션 객체는 type필드를 필수로 가지고 있어야 한다.

// ex)
const addTodoAction = {
  type: 'todos/todoAdded',
  payload: 'Buy milk'
}

Action Creator

Action Creator : 말 그대로 액션을 만드는 함수, 인자를 받아서 액션 객체 형태로 반환한다.

// ex)
const addTodo = text => {
  return {
    type: 'todos/todoAdded',
    payload: text
  }
}

Reducer

Reducer : 두개의 인자를 받아서 State를 변경하는 함수

// ex)
const initialState = { value: 0 }

function counterReducer(state = initialState, action) {
  // 액션의 타입을 확인
  if (action.type === 'counter/increment') {
    // 조건을 만족하면 상태의 값을 1 증가해준다.
    return {
      ...state,
      value: state.value + 1
    }
  }
  // 만족하지 않으면 그대로 반환
  return state
}

Store

Store : 핸재 State, Reducer, 몇가지 내장 함수들이 들어가 있다.

한 애플리케이션 당 하나의 Store를 만들게 된다.

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({ reducer: counterReducer })

console.log(store.getState())
// {value: 0}

지금 Store에는 counterReducer라는 Reducer가 들어가있고, getState()라는 현재 상태값을 반환하는 메소드가 있다.

Dispatch

Dispatch : Store의 내장함수 중 하나, 상태를 업데이트하는 유일한 방법

store.dispatch({ type: 'counter/increment' })

console.log(store.getState())
// {value: 1}

const increment = () => {
  return {
    type: 'counter/increment'
  }
}

store.dispatch(increment())

console.log(store.getState())
// {value: 2}

Dispatch는 Action을 인자로 받게 된다. 그렇게 받은 인자로 Store내의 Reducer 함수를 실행시켜서 해당 Action의 로직이 있다면 Action을 참고해서 새로운 상태를 만들어준다.