Redux 작동방식

Redux 작동방식

리덕스는 애플리케이션에 있는 하나의 중앙 데이터(상태) 저장소이다.

2개 이상의 저장소를 가지지 않고 오직 한 개의 저장소를 가진다.

그 저장소에 인증 상태, 테마, 입력 상태 등 무엇이든 저장할 것이다.

그러면 관리가 어려울 것 같은데 그 저장소 전체를 항상 직접 관리할필요가 없다.

궁극적으로는 그 저장소에 데이터를 저장해서 우리는 컴포넌트 안에서 그걸 사용할 수 있다.

저장소에 있는 상태가 변경되면 우리의 컴포넌트에서 그걸 인지해서 그에 맞춰 대응하고 UI를 업데이트하기 위해서 중앙 저장소에 대한 구독을 설정한다.

컴포넌트가 저장소를 구독하고 데이터가 변경될 때마다 저장소가 컴포넌트에 알려주게 된다.

또한 그 데이터를 변경할 방법이 필요한데 컴포넌트는 저장소에 있는 그 데이터를 직접 조작하지 않는다.

그 대신에 우리는 리듀서라는 개념을 이용한다.

리듀서함수는 useReducer 훅을 의미하는 것은 아니고 일반적인 프로그래밍 개념이다.

일반적으로 리듀서 함수는 입력을 변환해서 새로운 출력, 새로운 결과를 반환한다.

컴포넌트와 그 리듀서 함수를 연결하는 방법이 필요한데 그럴 때 액션을 사용한다.

액션은 단순한 자바스크립트 객체이며 리듀서가 수행해야 할 작업을 설명한다.

리덕스는 액션을 리듀서로 전달하고 원하는 작업에 대한 설명을 읽게 된다.

이어서 그 작업을 리듀서가 수행하고 리듀서는 새로운 상태를 반환하여 중앙 데이터 저장소의 기존 상태를 대체하게 된다.

리덕스의 동작을 간단하게 알아보기 위해서 node 환경을 준비한다.

npm init -y

우리는 리덕스를 사용하기 위해서 서드파티 패키지를 설치한다.

npm install redux

리덕스 패키지로부터 리덕스를 import한다.

const redux = require("redux");

import한 리덕스 객체를 이용해서 저장소를 만들 수 있다.

그리고 그 객체에 우리는 createStore 메소드를 통해서 저장소를 생성한다.

const store = redux.createStore(counterRedcuer);

저장소는 데이터를 관리하기 위한 리듀서 함수가 필요하다.

리듀서 함수는 표준 자바스크립트 함수이며 2개의 파라미터인 기존의 상태와 발송된 액션을 받는다.

리듀서 함수는 항상 새로운 상태 객체를 리턴해야만 하는 순수 함수가 되어야 한다.

즉 동일한 입력 값을 넣으면 항상 정확히 같은 출력이 산출되어야하며 그 함수 안에서는 어떠한 부수적인 효과도 없어야 한다.

const counterRedcuer = (state = { counter: 0 }, action) => {
  if (action.type === "INCREMENT") {
    return {
      counter: state.counter + 1,
    };
  }

    if (action.type === "DECREMENT") {
    return {
      counter: state.counter - 1,
    };
  }

  return state;
};

이제 그 저장소를 구독할 누군가도 필요하다.

store에서 getState()를 호출하여 최신 상태 스냅샷을 받아올 수 있다.

이 구독 함수는 상태가 변경될 때마다 트리거 될 것이고 최신 상태를 받을 수 있다.

const counterSubscriber = () => {
  const latestState = store.getState();
  console.log(latestState);
};

이제 우리는 리덕스가 이 구독 함수를 인식하도록 하고 상태가 변경될 때마다 이 함수를 실행하라고

말해줘야 한다.

store에 subscribe() 메소드를 호출해서 할 수 있다.

리덕스는 데이터와 저장소가 변경될 때마다 구독 함수를 실행해줄 것이다.

store.subscribe(counterSubscriber);

이제 액션을 만들고 발송하여 상태를 변경할 수 있다.

그걸 위해 store 객체에서 dispatch를 호출할 수 있다.

dispatch는 액션을 발송하는 메소드이며 식별자 역할을 하는 타입 프로퍼티를 가진 자바스크립트 객체이다.

새로운 액션을 발송해서 리듀서 함수를 다시 실행시켜서 counter를 증가, 감소 시킨다.

store.dispatch({ type: "INCREMENT" });
store.dispatch({ type: "DECREMENT" });