16장 리 덕 스

리덕스: 상태 관리 라이브러리. 

 -컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능.

 -컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트 거치지 않고 쉽게 전달.

 -전역 상태를 관리할 때 효율적.

 -코드의 유지 보수성 높여주고, 작업 효율 극대화, 개발자 도구, 미들웨어라는 기능을 제공하여 비동기 작업 효율적.

 

 

리덕스의 3가지 규칙

1.단일 스토어: 하나의 어플리케이션에는 한개의 스토어가 들어있다.

2.읽기 전용 상태: 기존에 setState를 사용하여 state를 업데이트할때 객체나 배열을 업데이트 하는 과정에서 불변성을 지켜주기 위해 spread를 사용하거나 immer와 같은 불변성 라이브러리를 사용하였다.  리덕스도 기존의 객체는 건드리지 않고 새로운 객체를 생성해야한다. 이유는 데이터가 변경되는 것을 감지하기 위해 얕은 비교를 하기 때문. 좋은 성능을 유지할 수있다.

3.리듀서는 순수한 함수이다: 

 -리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다

 -파라미터 외의 값에는 의존하면 안된다. 

 -이전 상태는 절대 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.

 -똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야한다.

 

액션

-프로젝트 상태에 어떠한 변화를 일으키는 것. 하나의 객체로 표현된다.

{  type: 'toggle_valye'}        ->  액션 객체는 type 필드를 꼭 필요하고, 이 값을 액션의 이름이라고 한다. 

-액션의 이름은 대문자, 고유해야 한다.

-액션 함수 : 액션 객체를 만들어 주는 함수.

  -어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데. 매번 작성하기 번거롭고 실수로 정보를 놓칠 수 있어서 함수로 관리한다. 

function addTodo(data){

  type: 'Add_todo', data};}

 

리듀서

-변화를 일으키는 함수이다.

-액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 두 값을 참고하여 새로운 상태를 만들어 반환한다.

-상태의 불변성을 유지하면서, 데이터에 변화를 일으켜야 한다.

-... 을 사용하면 편하다. 객체의 구조가 복잡해지면... 을 사용하는 것이 번거롭고 코드의 가독성이 떨어진다. 리덕스의 상태는 깊지 않은 구조로.(객체가 복잡해지면 immer 라이브러리 사용)

 

 

스토어

-한 프로젝트에서 리덕스를 적용하기 위해 단 한 개의 스토어를 만든다. 

-스토어 안에는 현재 애플리케이션 상태, 리듀서가 들어가 있고 중요한 내장 함수 포함.

 

디스패치

-액션을 발생시키는 것

-dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출.
-이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만든다.

 

구독

-subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출하면, 리스너 함수가 액션이 디스 패치되어 상태가 업데이트될 때마다 호출된다. 

const listener = () => {

  console.log('상태가 업데이트됨') }

const unsubscribe = store.subscribe(listener);

 

unsubscribe(); 추후 구독을 비활성화할 때 함수를 호출.