2020/11/25 - TIL(Redux 개념 정리)

 

 

Redux란?

자바스크립트 생태계에서 가장 많이 사용되고 있는 상태(state) 관리 라이브러리입니다. 컴포넌트 상태 관리 로직을 다른 파일로 분리하여 더욱 효율적으로 관리할 수 있고, 글로벌 상태 관리에도 좋다고 합니다. 

리덕스는 리액트에서 사용하기 위해 만들어진 라이브러리 이긴 하지만 일반 JavaScript 환경이나 Angular와 같은 다른 환경에서도 사용이 가능합니다. 

 

 

---

 

Redux를 왜 사용할까?

리액트를 사용하여 어플리케이션을 만들 때, 기본적으로 보통 하나의 루트 컴포넌트(App.js)에서 상태가 관리되었습니다. 

상태가 자식들에게 전달이 되기 위해서는 props Drilling 패턴이 발생하게 되는데 이러한 패턴은 어플리케이션의 규모가 커졌을 때 컴포넌트의 개수, 데이터가 늘어나게 되면 코드가 길어지게 되고 유지 보수 또한 힘들어질 것입니다. 이러한 문제를 해결하고 상태 관리를 전역에서 다루기 위하여 Redux를 사용한다고 합니다.

 

 

---

 

리덕스 활용 규칙 3가지

• 단일 스토어 사용
  하나의 어플리케이션에는 하나의 스토어를 사용한다.
• 상태(state)는 읽기 전용이어야 한다.
  React의 setState()와 같이 값을 직접 push나 할당하는 것이 아닌 Object.assign이나 Object Spread Syntax와 같이 불변성을 유지해야 한다.
• 리듀서는 순수한 함수이여야 한다.
  순수 함수란 동일한 입력을 받았을 때 언제나 동일한 출력을 나타내는 함수를 말한다.

 

---

 

리덕스의 흐름

 

 

출처 : ko.redux.js.org

 

 

Action

리덕스에서의 액션은 하나의 객체로 표현됩니다. 이 객체에는 type이라는 필드를 필수적으로 가지고 있어야 하고 필요한 추가적인 요소들을 추가할 수 있습니다.

 

{
  type : "ADD_TODO",
  data
}

 

 

Action Creator

Action Creator는 액션을 만드는 함수를 말합니다. 인자를 입력 받아서, 액션의 객체의 요소로 만들 수 있습니다.

function addTodo(data){
  return{
    type : "ADD_TODO",
    data
  };
}

Action Creator는 액션을 객체 형태로 반환하는 역할을 합니다.

 

 

 

Dispatch

Dispatch는 Action Creator가 반환한 액션을 파라미터로 받아서 store의 reducer에게 넘겨주는 역할을 합니다. 

const boundAddTodo = text => dispatch(addTodo(text))
boundAddTodo(text)

 

 

Reducer

reducer는 dispatch의 파라미터로 실행된 action의 type을 확인해서 그에 맞는 결과를 실행합니다.

reducer는 store의 상태(state)를 변경시키기 때문에 state를 파라미터로 받고, dispatch를 타고 온 action도 파라미터로 받습니다.

function todos(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          text: action.text,
          completed: false
        }
      ]
    default:
      return state
  }
}

reducer는 state를 변경하지 않고 Object.assign()이나 Object Spread Syntax를 사용해서 복사된 객체를 반환해야 합니다.

 

 

 

 

Store

store는 모든 컴포넌트에서 사용할 수 있는 전역 State를 저장해놓는 저장소 입니다. 하지만 이 state는 엄격하게 관리되기 때문에 dispatch 함수를 통해서만 state에 접근이 가능합니다.

import { createStore } from 'redux'
import todoApp from './reducers'
const store = createStore(todoApp)

createStore는 파라미터로 reducer를 받습니다.

import {
  addTodo,
} from './actions'

// Dispatch some actions
store.dispatch(addTodo('Learn about actions'))
store.dispatch(addTodo('Learn about reducers'))
store.dispatch(addTodo('Learn about store'))