[Redux - 2] Redux의 구조

이 파트에서는 개념은 꼭 이해 하는 것이 중요 합니다!

여기있는 내용을 모두 자세히 알기에는 어렵습니다. 😠 "그렇구나" 정도로 넘어가도 좋아요!

이 이후에는 다양한 메서드의 활용 방법을 통해 흐름을 파악해 봐요! ✏️

 

Redux Flow

Redux는 다음과 같은 순서로 상태를 관리합니다.

 

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
2. 이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
상태가 변경되면, React는 화면을 다시 렌더링 합니다.

 

즉, Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 됩니다.

---

Action

상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다.

이는, 하나의 객체로 표현되는데요, 액션 객체는 다음과 같은 형식으로 이뤄져있습니다.

{
  type: "TOGGLE_VALUE"
}

액션 객체는 type 필드를 필수적으로 가지고 있어야하고 그 외의 값들은 개발자 마음대로 넣어줄 수 있습니다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "Redux practice"
  }
}

보통은 함수를 통해서 만듭니다. " 액션 생성 함수(Action Creator) " 라고 합니다.

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

// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

이러한 액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함입니다. 

그래서 보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불러와서 사용합니다.

리덕스를 사용 할 때 액션 생성함수를 사용하는것이 필수적이진 않습니다.

---

Reducer

Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수입니다.

const count = 1;

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {
  // Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
  switch (action.type) {
    //action === 'INCREASE'일 경우
    case "INCREASE":
      return state + 1;

    // action === 'DECREASE'일 경우
    case "DECREASE":
      return state - 1;

    // action === 'SET_NUMBER'일 경우
    case "SET_NUMBER":
      return action.payload;

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
  }
};
// Reducer가 리턴하는 값이 새로운 상태가 됩니다.

이때, Reducer는 순수함수여야 합니다. 

외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야 하기 때문입니다.

---

Store

Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 합니다.

스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가있고, 추가적으로 몇가지 내장 함수들이 있습니다.

아래 코드에서는 createStore 메서드를 활용해 사용자가 만든 Reducer를 연결해서 Store를 생성할 수 있습니다.

import { legacy_createStore as createStore } from 'redux';
import counterReducer from './reducer' 
// 예를 들은 reducer.js에 있는 counterReducer를 임포트 했다.

const store = createStore(counterReducer);

---

Dispatch

Dispatch는 Reducer로 Action을 전달해 주는 함수입니다. Dispatch의 전달인자로 Action 객체가 전달됩니다.

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

---

Subscribe

구독 또한 스토어의 내장함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. 

subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때 마다 전달해준 함수가 호출됩니다.

리액트에서 리덕스를 사용하게 될 때 보통 이 함수를 직접 사용하는 일은 별로 없습니다. 

그 대신에 react-redux 라는 라이브러리에서 제공하는 connect 함수 또는 

useSelector Hook 을 사용하여 리덕스 스토어의 상태에 구독합니다.