Skip to content

Latest commit

 

History

History
217 lines (141 loc) · 6.49 KB

Redux.md

File metadata and controls

217 lines (141 loc) · 6.49 KB

Redux

Reference: redux docs, velopert



1. Redux 란?

  • React 생태계에서 가장 사용률이 높은 상태관리 라이브러리
  • Redux를 사용하면
    • 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며
    • 글로벌 상태 관리도 손쉽게 할 수 있다


2. Redux vs Context API

Redux를 사용하는 것과 Context API의 차이


2-1. Middleware

  • Redux에는 middleware라는 개념이 존재한다
    • Redux의 middleware를 사용하면 action object가 reducer에서 처리되기 전에 원하는 작업을 수행할 수 있다
      • ex)
        • 특정 조건에 따라 action이 무시되게 만들기
        • action을 console에 출력하기
        • action이 dispatch 되었을 때, 이것을 수정해서 reducer에 전달되게 만들기
        • 특정 action이 발생했을 때
          • 이것에 기반하여 다른 action이 발생되게 하기
          • 특정 JavaScript 함수를 실행하기
  • Middleware는 주로 비동기 작업을 처리할 때 많이 사용된다

2-2. Useful Functions & Hooks

  • �connect 함수를 사용하면 redux의 상태 또는 action 생성 함수를 component의 props로 받아올 수 있다
  • useSelector, useDispatch, useStore 과 같은 Hooks를 사용하면 손쉽게 상태를 조회하거나 action을 dispatch 할 수 있다

2-3. Global State

  • Context API를 사용해서 global state 를 관리할 때에는 일반적으로 기능별로 Context를 만들어서 사용했다면,
    • Redux는 모든 Global state를 하나의 커다란 object에 넣어서 사용하는 것이 필수이다
      • 이것을 통해 매번 Context 를 새로 만드는 불편함을 피할 수 있다!


3. Key Concepts


3-1. Action

  • State에 어떤 변화가 필요할 때, action을 발생시킨다

  • Action은 하나의 객체로 표현된다

    • ex)

      {
  type: "VALUE"
}

  • Action 객체는 type을 필수로 가져야 하고, 그 외의 값들은 원하는대로 넣을 수 있다

    • ex)

      {
  type: "TODO",
  data: {
    id: 0,
    text: "집 가기"
  }
}

    • ex)

      {
  type: "CHANGE_INPUT",
  text: "집에 가세요"
}

3-2. Action Creator

  • Action 생성 함수는 말 그대로 aciton을 만드는 함수다

  • Parameter를 받아와서 action 객체 형태로 만들어준다

  • ex)

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

// Arrow function도 가능!
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

  • Action Creater 를 사용하는 이유는 나중에 component에서 action을 쉽게 발생시키기 위해서다

    • 그래서 보통 export keyword 붙여서 다른 file에서 해당 함수를 불러내서 사용한다

  • Redux에서 Action Creater 사용이 필수는 아니다!

    • Action을 발생시킬 때마다 action 객체를 작성해서 쓸 수도 있다

3-3. Reducer

  • Reducer는 변화를 일으키는 함수다

  • 두 가지 parameter를 받아온다

    • state

    • action

      • ex)

        function reducer(state, action) {
  // Update status
  return alteredState;
}

  • Reducer는 현재 상태와 전달 받은 action을 참고하여 새로운 상태를 만들어서 return한다


3-4. Store

  • Rexux에서는 한 application당 하나의 store를 만들게 된다
  • Store 안에는 현재의 app 상태와 reducer가 들어가있고, 거기에 몇가지 내장 함수들이 있다

3-5. Dispatch

  • dispatch는 store의 내장 함수 중 하나다

  • dispatch는 action을 발생 시키는 역할을 한다

    • dispatch 함수에는 action을 parameter로 전달한다

      • ex)

        dispatch (action)

  • dispatch를 호출하면 store는 reducer를 실행시켜서 해당 action을 처리하는 logic이 있다면, 그 action을 참고하여 새로운 상태를 만들어준다


3-6. Subscribe

  • subscribe도 dispatch처럼 store의 내장 함수 중 하나이다
  • subscribe 함수에 특정 함수를 전달해주면, action이 dispatch 되었을 때 마다 전달한 함수가 호출된다
  • react-redux 라는 library에서 제공하는 connect 함수 또는 useSelector Hook을 사용하여 redux store의 상태에 subscribe 한다


4. Three Principles

Redux를 사용할 때 3가지 fundamental principles를 지켜야한다


4-1. Single source of truth

  • 하나의 application에는 단 한개의 store를 만들어서 사용한다
    • 여러개의 store를 사용하는 것도 가능은 하지만 권장되지 않는다!

4-2. State is read-only

  • React에서 state를 update 해야 할 때, setState를 사용하고, array를 update 해야 할 때는 array 자체에 push하지 않고 concat 같은 함수를 사용하여 기존 array는 수정하지 않고 새로운 array를 만들어서 교체하는 방식으로 update한다
  • Redux에서도 이와 마찬가지로, 기존의 state는 변경하지 않고 새로운 state를 생성하여 update해주는 방식으로 해주면,
    • 나중에 개발자 도구를 통해서 뒤로 돌릴 수도 있고, 다시 앞으로 돌릴 수도 있다
  • Redux에서 immutability를 유지해야 하는 이유는 내부적으로 data가 변경되는 것을 감지하기 위하여 shallow equality 검사를 하기 대문이다
    • 이것을 통해 객체의 변화를 감지 할 때 객체의 깊숙한 안쪽까지 비교를 하는 것이 아니라 겉핥기 식으로 비교를 하여 좋은 성능을 유지할 수 있다

4-3. Changes are made with pure functions

  • 아래의 3가지 사항을 주의하여 pure function을 만들야 한다
    • Reducer 함수는 이전 상태와 action 객체를 parameter로 받는다
    • 이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 return한다
    • 똑같은 parameter로 호출된 reducer 함수는 언제나 똑같은 결과값을 return해야 한다