코드로 보는 리덕스 기초

 

리덕스 처음부터 시작하기

 

모듈 설치하기

npm i redux react-redux

 

리덕스를 사용하려면 require로 불러온다. 

const redux = require("redux");

---

저장소 만들기

const store = redux.createStore();

저장소 만들기 (데이터를 관리함)(관리하는 데이터는 결국 리듀서 함수에 의해 결정된다.리듀서 함수가 새로운 상태 스냅샷을 생성하니까)
(리듀서는 액션이 도착할 때마다 새로운 상태 스냅샷을 뱉어내야 한다.)

 

---

리듀서 함수 만들기

const counterReducer = (state = { counter: 0 }, action) => {
  return {
   counter: state.counter + 1,
  };
};

➥ 위 함수 해석: 우리가 자동으로 받는 기존 상태를 참조하고, 상태에 저장된 기존의 counter 값에 액세스하고, 새로 리턴된 상태의 새로운 counter 값으로서 거기에 1을 더한다.

 

⭐️⭐️

리듀서 함수는 표준 자바스크립트 함수지만, 리덕스 라이브러리에 의해 호출될 거다. 항상 2개의 파라미터를 받는다. (기존의 상태와 발송된 액션)
그리고 이 리듀서 함수는 어떤 출력을 리턴해야만 한다. 항상 새로운 상태 객체를 리턴해야만 한다. 그래서 리듀서 함수는 순수한 함수가 되어야 한다.
(순수함수: 동일한 입력값을 넣으면 항상 정확히 같은 출력이 산출된다. 어떠한 side effect가 없다. )
예를들어 HTTP요청을 전송한다거나 뭔가를 로컬 저장소에 기록한다거나 로컬저장소에 뭔가를 가져오지 말아야한다.
대신에 리듀서는 리덕스가 제공하는 입력을 취하고 예상된 출력물인 새로운 상태 객체를 생성하는 순수함수가 되어야 한다.

리듀서 함수의 출력은 일반적으로 객체! 그 이유는 대부분의 애플리케이션에서 상태는 하나의 값 이상을 의미하기 때문! 하지만 이론적으로는 어떠한 값 유형도 가능!

⭐️⭐️⭐️

리듀서 함수에 state={conuter:0}라고 state 파라미터에 기본값을 준 이유!

 

state 파라미터에 기본값을 주지 않는다면 "Cannot read properties of undefined (reading 'counter')" 오류 발생!

 

createStore를 이용해서 저장소를 만들었고, 그 저장소에 필요한 counterReducer가 있다. 그리고 그 리듀서에 우리는 상태 객체를 리턴한다. 기존 상태 카운터에 1을 더해서 카운터를 설정한다. 그 저장소가 초기화될 때 리덕스가 이 리듀서를 "처음으로" 실행한다는게 문제다.
저장소가 생성될때 counterReducer 라는 리듀서 함수가 안에 있는 코드가 실행되는데, 문제는 그 시점에 상태가 정의되어 있지 않는다!
처음으로 실행되는 것이기 때문에 기존 상태가 없는것이다.
그래서 리듀서 함수가 파라미터로 받는 state 에 기본값을 주어야 한다!! (달리 정의되어 있지 않으면 기본값이 가정된다. )
최초 실행될 때, 값이 있게 하는거고, 그 다음부터는 기존 상태가 있게 된다. (기본값은 사용되지 않는다. )
그래서 리듀서 함수에 state={conuter:0}라고 state 파라미터에 기본값을 준거다.

 

정리 👇

리듀서가 처음 호출될 때, state값은 undefined가 된다.

따라서 state의 초깃값을 지정해서 액션이 발생하기 전에 이 케이스에 대해 처리해줘야 한다. 만약 초깃값을 설정해주지 않을 시 오류가 발생한다. 

 

---

리듀서와 저장소 연결해주기

const store = redux.createStore(counterReducer);

 

저장소와 작업하는 건 리듀서 함수이기 때문에 저장소는 데이터를 조작하는 리듀서 함수가 어떤 함수인지 알아야 한다.

 

 

TIP 초기상태가 궁금할때

console.log(store.getState());

 

 

---

액션 만들어주기 (저장소를 구독할 누군가와 발송할 수 있는 액션이 필요하다!)

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

어떠한 파라미터도 받지 않는다.

함수 안에서 우리는 저장소에 가서 getState()를 호출할 수 있다.
getState()는 createStore()로 생성된 저장소에서 사용할 수 있는 메서드다. 그리고 업데이트된 후에 최신 상태 스냅샷을 제공한다.
그럼 이 구독 함수는 상태가 변경될 때마다 트리거된다. 트리거가 되면 getState()메소드로 변경된 후의 최신 상태를 받을 수 있다.

 

---

리덕스가 구독 함수를 인식하도록 해주기

( 상태가 변경될 때마다 이 함수를 실행하라고 말해줘야한다. 저장소에 가서 subscribe() 메소드를 호출하면 된다. )

 

store.subscribe(counterSubscriber);

subscribe()메소드는 구독 함수를 받고, 리덕스는 데이터와 저장소가 변경될 때마다 그걸 실행해줄거다.
여기서 counterSubscriber를 실행하지 않는것이 중요하다!! 그냥 가리킬뿐이다! 그 이유는 리듀서와 구독함수 모두 리듀서가 실행하기 때문!

 

---

액션 보내주기 (dispatch)

store.dispatch({ type: "increment" });

dispatch()는 액션을 발송하는 메소드이다. 그리고 액션은 자바스크립트 객체이다.
식별자 역할을 하는 type 프로퍼티를 가진 자바스크립트 객체이다. type뒤에는 고유한 문자열이 되어야한다.
그래야 우리가 발송하는 모든 고유한 액션들이 리듀서에서 다른 것들을 유발하게 된다.

 

 

⭐️⭐️ 위에서 액션은 increment이다.
일반적으로 리덕스를 사용할 때 리듀서 내부에서 다른 액션에서는 다른 일을 하는게 목표이다. 그래서 counterReducer 함수의 파라미터 안에 두번째 변수로 action이 있는 거다.
현재 상태를 받고, 디스패치 된 액션을 받으면 그 리듀서가 돌아가게 할 것이다.

if 액션 타입이 increment와 같다고 하면 카운터에 증가를 시키고 싶다. 그게 아니라 다른 액션이면 변하지 않은 상태를 리턴하겠다.
그리고 상태에 있는 밸류를 바꿀 것이다. 왜냐하면 초기화 때문에 카운터를 증가하지 않을것이기 때문에 디폴트 값을 반환할것이다.

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

// 이러고 실행시키면 { counter: 1 } 라고 나온다. 초기화 때문에 더이상 증가하지 않는다.

➥ 위 함수 해석: if 액션 타입이 increment와 같다고 하면 카운터에 증가를 시키고 싶다. 그게 아니라 다른 액션이면 변하지 않은 상태를 리턴하겠다. 그리고 상태에 있는 밸류를 바꿀 것이다. 왜냐하면 초기화 때문에 카운터를 증가하지 않을것이기 때문에 디폴트 값을 반환할것이다.

 

---

store.dispatch({ type: "decrement" });

// { counter: 1 } { counter: 0 } 이렇게 나온다.

첫번째 출력은 증가 액션 다음에 store.subscribe(counterSubscriber);에서 나온거다. 그리고나서 액션을 또 만나서 store.subscribe(counterSubscriber);를 트리거했고 카운터가 0이 된거다.

리덕스는 리액트에만 제한되지 않는다.

 

---

const redux = require("redux");

const counterReducer = (state = { counter: 0 }, action) => {
  return {
    counter: state.counter + 1,
  };
};

const store = redux.createStore(counterReducer);
console.log(store.getState());                      // 여기서 콘솔창에 { counter: 1 } 찍힌다. 초기상태가 1

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

store.subscribe(counterSubscriber);

store.dispatch({ type: "increment" });             // 여기서 콘솔창에 { counter: 2 } 찍힌다. 초기상태에 +1

 

---

const redux = require("redux");

const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === "increment") {
    return {
      counter: state.counter + 1,
    };
  }
  if (action.type === "decrement") {
    return {
      counter: state.counter - 1,
    };
  }
  return state;
};

const store = redux.createStore(counterReducer);
console.log(store.getState());             //여기서 콘솔창에 { counter: 0 } 찍힌다. 초기화 때문에 counter를 증가시키지 않는다. 대신 디폴트 상태를 리턴한다. 

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

store.subscribe(counterSubscriber);

store.dispatch({ type: "increment" }); // 여기서 콘솔창에 { counter: 1 } 찍힌다. 초기상태에 +1
store.dispatch({ type: "decrement" }); // 여기서 콘솔창에 { counter: 0 } 찍힌다. 현재상태에 -1

 

 

 

---

 

참고)

유데미 리액트 완벽가이드

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓