`49일차` TIL 210517 `Redux`

May 17, 2021

1. 리덕스란 ?

자바스크립트 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구
리액트로 만들 수 있는 싱글 페이지 애플리케이션은 data 혹은 UI가 복잡, 다양해지는 경우가 많아진다.
그에 따라 단일 페이지를 이루는 컴포넌트들의 데이터 교류 또한 복잡해지기 때문에 이를 효율적으로 관리할 방법이 필요하다. 리덕스는 이러한 복잡한 상태관리를 효율적으로 할 수 있게 도와주는 도구이다.
리덕스는 스토어를 사용하여 상태를 컴포넌트 바깥에 두고 스토어라는 중간자를 통해 상태를 업데이트 하거나 새로운 상태를 전달 받는다.
즉 리덕스를 사용하면, 상태값을 컴포넌트에 종속시키지 않고 상태관리를 바깥에서 할 수 있게 해준다.

2. 용어정리

Action : 상태의 변화가 필요할 때 액션을 발생시킨다. 액션은 하나의 객체로 표현된다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "redux"
  }
}

Action Creator : 액션 생성함수. 액션을 만드는 함수이다. 파라미터를 입력받아 액션 객체 형태로 만들어준다.
이 함수는 data 라는 파라미터를 입력받아 액션을 객체 형태로 반환하는 역할을 한다.

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

Reducer : 변화를 일으키는 함수. 이전 상태와 액션을 파라미터로 입력받는다. 반환값은 로직에 의해 변화된 상태값을 반환한다.
Store : 컴포넌트 외부에 있는 상태 저장소. 스토어 안에는 현재 상태들, 리듀서, 그리고 몇가지의 내장 함수를 포함하고 있다.
Dispatch : 스토어의 내장 함수 중 하나로, 액션을 발생시키는 역할을 한다. dispatch(action) 디스패치가 액션을 발생시켜 스토어에게 상태변화가 필요하다는 것을 알린다.
그렇게 호출된 액션은 리듀서 함수를 호출시키고, 액션에 맞는 로직대로 상태를 변화시키는 과정을 거치는 것이다.
Subscribe : 스토어의 내장 함수. 함수 형태의 값을 파라미터로 받아온다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을때마다 전달해준 함수가 호출된다.

3. 정리

추가, 삭제와 같은 각각의 액션 타입을 정의한다. 액션 함수는 각각의 액션 타입과 파라미터를 입력받아 액션을 객체 형태로 반환해준다.
상태의 변화가 필요해진다면, 디스패치가 액션을 발생시켜 스토어에게 알린다. 스토어로 전달된 액션은 스토어의 리듀서 함수를 호출시키고, 호출된 리듀서 함수는 이전 상태와 액션타입을 파라미터로 전달 받아
정의된 로직대로 현재 상태값을 변화시켜 변화된 상태를 반환한다. 반환된 상태는 스토어에 저장된다

4. 리덕스 규칙

단일 스토어 사용 권장, 하나의 애플리케이션에는 하나의 스토어를 사용하는 것을 권장
상태는 읽기 전용이어야 한다. immutability
리듀서는 순수한 함수여야 한다.