20210615 Redux01 : Redux의 개념, Store, Action, Reducer, 데이터 구조에 따른 설계, combineReducers, reducers 모듈화

8 분 소요

Redux 01

Redux Basic

Component들 간의 정보 전달 과정에서 불편함을 느끼고 contextAPI를 사용하는데
Redux는 해당 context에 있는 전역 데이터를 효과적인 관리하는 라이브러리 임
Redux는 Store라는 독립적인 부분 딱 하나 존재하는데(단일 스토어), 어느 Component에서 store의 state를 변경하면 store에서 연관된 다른 Component를 rerender 시킴

단일 스토어 사용 준비

스토어 만들기
- import redux
- 액션 정의 -> 액션을 사용하는 리듀서 만듦 -> 리듀서들을 합침 -> 최종 합쳐진 리듀서를 인자로 단일 스토어를 만듦

스토어 사용하기
- import react-redux
- connect() 함수를 이용해서 컴포넌트에 연결

Actions (액션)

액션은 객체(Object)이다.
두가지 형태의 액션이 존재
- type만 있는 액션 {type: 'TEST'} (payload 없는 액션, Action에서 전달할 특별한 값이 없는 경우)
- type과 payload가 있는 액션 {type: 'TEST', params: 'hello'} (Action에서 특별한 값을 전달하여 활용해야 하는 경우)
- type은 필수 property 이고, String 임
만들어진 Action이 스토어에 전해 스토어의 상태를 변경하는 용도로 사용됨

액션 생성자

Action Creator : 액션을 생성하는 함수
함수를 통해 액션을 생성해서, 액션 객체를 return 함
예) createTest('hello') -> return {type: 'TEST', params:'hello'}

function ActionCreator(...args) {
  return ActionObject;
}

액션이 하는 일

액션 생성자를 통해 액션을 만듦 -> 액션 객체를 리덕스 스토어에 보냄 -> 리덕스 스토어가 액션 객체를 받으면 스토어의 상태값이 변경됨 -> 변경된 상태 값에 의해 상태를 이용하고 있는 컴포넌트가 변경됨
액션은 스토어에 보내는 일종의 인풋이라고 볼 수 있음

액션 준비

액션의 타입을 정의하여 변수로 빼는 작업
- 강제는 아님
- 그냥 타입을 문자열로 넣기에는 실수를 유발할 가능성이 큼
- 미리 정의한 변수를 사용하면 스펠링에 주의를 덜 기울여도 됨

액션 객체를 만들어 내는 함수를 만드는 작업
- 하나의 액션 객체를 만들기 위해 하나의 함수를 만들어 냄
- 액션의 타입은 미리 정의한 타입 변수로 부터 가져와서 사용함

// action.js
// type string 관리
export const ADD_TODO = "ADD_TODO";
// type의 경우 space는 underbar, 글자는 대문자로 사용함

// addTodo의 매개변수가 todo임으로 todo property를 항상 가짐을 알 수 있음
export function addTodo(todo) {
  return {
    type: ADD_TODO,
    // todo: todo
    todo,
  };
}

Reducers (리듀서)

액션을 주면, 그 액션이 적용되어 수정되거나 아닌 결과를 만들어주는 함수
Pure Function : 같은 input을 받으면 같은 결과를 내는 함수
- reducer 안에서 시간에 따라서 변하는 결과가 들어가면 안됨
Immutable : original state와 new State가 별도의 객체로 만들어 져야함 (리덕스는 리듀서를 통해 스테이트가 달라졌음을 Immutable 방식으로 인지함)

function reducerName(preState, action) {
  return newState;
}

액션을 받아서 스테이트를 리턴하는 구조
인자로 들어오는 prevState와 리턴되는 newState는 다른 참조를 가지도록 해야함(Immutable 해야함)

// Type 가져오기
import { ADD_TODO } from "./actions";

// state 구상 -> ['코딩', '점심 먹기']
const initialState = [];

export function todoApp(previousState = initialState, action) {
  // 초기값 설정 방법 01
  // if (previousState === undefined) {
  //   return [];
  // }

  // 초기값 설정 방법 02
  // 매개변수 자체에 initialState 값을 default 설정해 줌

  if (action.type === ADD_TODO) {
    // 배열 형태로 todo 값을 넣음
    return [...previousState, action.todo];
  }

  return previousState;
}

createStore()

스토어를 만드는 함수
- const store = createStore(리듀서)

// store.js
import { createStore } from "redux";
import { todoApp } from "./reducers";

const store = createStore(todoApp);

export default store;

스토어 함수 return 관련 함수
- store.getState() : state를 가져오는 함수
- store.dispatch(액션), store.dispatch(액션생성자()) : 액션을 인자로 넣어서 store의 상태를 변경시킴
- const unsubscribe = store.subscribe(()=>{})
  - subscribe()는 state에 변경이 생겼을 때 안에 있는 callback을 실행시킴
  - return 이 unsubscribe 함수 임
  - unsubscribe() 하면 subscribe로 실행했던 함수가 이후 부터는 제거됨
- store.replaceReducer: 원래 가지고 있던 reducer를 다른 reducer로 바꾸는 기능

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

// store와 action생성자를 가져옴
import store from "./redux/store";
import { addTodo } from "./redux/actions";

// subscribe : 스토어의 상태가 변경되면 함수가 호출됨
// 그리고 unsubscribe의 함수를 return 함
const unsubscribe = store.subscribe(() => {
  console.log(store.getState());
});

// dispatch : state를 변경 함
store.dispatch(addTodo("coding"));
store.dispatch(addTodo("Read Books"));
store.dispatch(addTodo("eat"));
unsubscribe();
// 이후에는 subscribe에 있는 함수가 실행안됨 (store 변경은 그대로 이루어짐)
store.dispatch(addTodo("coding"));
store.dispatch(addTodo("Read Books"));
store.dispatch(addTodo("eat"));

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

정리

Action 만들기
- Action 생성자 함수 만들기 (Type 결정)
- Type이 필요함
- Action에 데이터가 들음

Reducer 만들기
- Reducer 생성 함수 만들기
- Type을 가져와서 만듦
- Type을 기준으로 action을 받아 state를 변경할지 결정하는 로직

Store 만들기
- createStore(reducer)로 단일 store를 만듦
- 어떤 reducer 로직으로 store 만들건지 결정

Store 활용하기
- dispatch(Action) : state 변화 시키기
- subscribe(callback) : state 변화시에 실행할 callback
- unsubscribe() (subscribe의 return) : subscribe 의 callback 중지

State 설계01 : state가 객체 형태의 데이터에 boolean 상태를 가지는 경우

State 형태 설계
- ['코딩', '점심 먹기'] -> [{text: '코딩', done: false}, {text: '점심 먹기', done: false}]
done 속성의 경우, 변경 가능하게 해야함

Actions 설계

// actions.js

// type 관리
export const ADD_TODO = "ADD_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";

// Actions Creator
export function addTodo(text) {
  return {
    type: ADD_TODO,
    text,
  };
}
// {type: ADD_TODO, text: '할일'}
// 어차피, boolean 값은 기본값이 false이기 때문에 데이터 추가 및 생성 때는 받을 필요가 없음

// Change Done
export function completeTodo(index) {
  return {
    type: COMPLETE_TODO,
    index,
  };
}
// {type: ADD_TODO, index: 0}
// 어떤 것을 done true로 만들 것인가? -> index를 받아서 해당 action을 true로 만듦

Reducer 설계

import { ADD_TODO, COMPLETE_TODO } from "./actions";

const initialState = [];

export function todoApp(previousState = initialState, action) {
  // state에 데이터 추가 하는 경우
  if (action.type === ADD_TODO) {
    return [...previousState, { text: action.text, done: false }];
  }
  // 객체가 배열로 쌓이는 구조로 바꿈

  // state에 데이터의 done 상태를 변경 하는 경우
  if (action.type === COMPLETE_TODO) {
    // 변경할 객체를 찾아야 함 -> map 돌려서 받아온 index로 객체 찾아 값 변경
    return previousState.map((todo, index) => {
      if (index === action.index) {
        return { ...todo, done: true };
      }
      return todo;
    });
  }

  return previousState;
}

사용

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch(addTodo("할일01"));
// [{text: "할일01", done: false}]
store.dispatch(completeTodo(0));
// [{text: "할일01", done: true}]

State 설계02 : todo의 배열(todos)과, filter 값을 가지는 경우

State 형태 설계
- [{text: '코딩', done: false}, {text: '점심 먹기', done: false}]
- => {todos: [{text: '코딩', done: false}, {text: '점심 먹기', done: false}], filter: 'ALL'}
filter 속성의 경우, 변경 가능하게 해야함

Actions 설계

// actions.js

// type 관리
export const ADD_TODO = "ADD_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";
export const SHOW_ALL = "SHOW_ALL";
export const SHOW_COMPLETE = "SHOW_COMPLETE";

// Actions Creator
export function addTodo(text) {
  return {
    type: ADD_TODO,
    text,
  };
}

// Change Done
export function completeTodo(index) {
  return {
    type: COMPLETE_TODO,
    index,
  };
}

// Change Filter
export function showAll() {
  return { type: SHOW_ALL };
}
export function showComplete() {
  return { type: SHOW_COMPLETE };
}

Reducer 설계

previousState를 전개구문으로 사용하고, 변화 시킬 property만 변경하여 덮어 쓰게 만들어 각각 독립적으로 명령을 수행할 수 있게 함 (서로 영향을 주지 않음)

import { ADD_TODO, COMPLETE_TODO, SHOW_ALL, SHOW_COMPLETE } from "./actions";

// Initial Data structure
const initialState = { todos: [], filter: "ALL" };

// Reducer
export function todoApp(previousState = initialState, action) {
  // Add toDo
  if (action.type === ADD_TODO) {
    return {
      ...previousState,
      todos: [...previousState.todos, { text: action.text, done: false }],
    };
  }

  // Change Done
  if (action.type === COMPLETE_TODO) {
    return {
      ...previousState,
      todos: previousState.todos.map((todo, index) => {
        if (index === action.index) {
          return { ...todo, done: true };
        }
        return todo;
      }),
    };
  }

  // Change Filter
  if (action.type === SHOW_ALL) {
    return {
      ...previousState,
      filter: "ALL",
    };
  }

  if (action.type === SHOW_COMPLETE) {
    return {
      ...previousState,
      filter: "COMPLETE",
    };
  }

  return previousState;
}

사용

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch(addTodo("할일01"));
// {todos: Array(1), filter: "ALL"}
store.dispatch(completeTodo(0));
// {todos: Array(1), filter: "ALL"} -> done : true
store.dispatch(showComplete());
// {todos: Array(1), filter: "COMPLETE"}
store.dispatch(showAll());
// {todos: Array(1), filter: "ALL"}

Key Point

단일 store이기 때문에, reducer를 어떻게 잘쪼개서 쓰느냐가 관건임
reducer를 쪼개서 type 별로 사용하는데 type별로 각각의 행동이 영향을 미치지 않고 독립적으로 이루어 질수 있게 하는 것이 포인트임
- previousState를 전개하여 사용하여 나머지는 그대로 유지하게 하는 방법을 잘 이용 할것!(...previousState)

combineReducers

규모가 커진 앱을 다루는 경우
store는 단일 store이기 때문에 reducer 또한 하나가 들어가게 되는데, reducer를 관리할 때 너무 많은 내용들이 하나의 reducer로 뭉쳐있어 복잡도가 올라감
이를 해결하기 위해서 여러개의 Reducer로 작성하고, 이를 하나의 Reducer로 만들어 주는 것이 combineReducers임

CombineReducers 사용

combineReducers에는 모두 종합된 Data 구조의 객체가 들어가고, 해당 속성에는 속성별 Reducer 함수가 들어가서 연결 되어 있음
기존의 reducer를 각 속성별 함수로 분해하기 때문에, 속성별 Reducer 함수가 return 하는 결과도 각 속성에 맞게 변경해줘야 함
각 Reducer 함수가 참조하는 initialState 구조도 각 함수에 맞게 변경해서 연결 해줘야 함

import { combineReducers } from "redux";

// Types
import { ADD_TODO, COMPLETE_TODO, SHOW_ALL, SHOW_COMPLETE } from "./actions";

// Initial Data structure
const initialState = { todos: [], filter: "ALL" };
const todosInitialState = initialState.todos;
const filterInitialState = initialState.filter;

// CombineReducers
const reducer = combineReducers({
  todos: todosReducer,
  filter: filterReducer,
});
export default reducer;

// todosReducer
function todosReducer(previousState = todosInitialState, action) {
  // Add toDo
  if (action.type === ADD_TODO) {
    return [...previousState, { text: action.text, done: false }];
  }

  // Change Done
  if (action.type === COMPLETE_TODO) {
    return previousState.map((todo, index) => {
      if (index === action.index) {
        return { ...todo, done: true };
      }
      return todo;
    });
  }

  return previousState;
}

// filterReducer
function filterReducer(previousState = filterInitialState, action) {
  // Change Filter
  if (action.type === SHOW_ALL) {
    return "ALL";
  }

  if (action.type === SHOW_COMPLETE) {
    return "COMPLETE";
  }

  return previousState;
}

combineReducers를 구성하는 각 reducer의 모듈화 (파일로 분리 관리)

redux 폴더에서, reducers 폴더를 따로 구성함

Reducers : reducer

개별적인 Reducer들을 묶어 store로 보내는 router 같은 역할을 함

// reducers/reducer.js
import { combineReducers } from "redux";

// reducer
import todos from "./todos";
import filter from "./filter";

// combineReducers
const reducer = combineReducers({
  todos: todos,
  filter: filter,
});
export default reducer;

Reducers : todos

// reducers/todos.js

// Types
import { ADD_TODO, COMPLETE_TODO } from "../actions";

// Initial Data structure
const initialState = [];

// todosReducer
export default function todos(previousState = initialState, action) {
  // Add toDo
  if (action.type === ADD_TODO) {
    return [...previousState, { text: action.text, done: false }];
  }

  // Change Done
  if (action.type === COMPLETE_TODO) {
    return previousState.map((todo, index) => {
      if (index === action.index) {
        return { ...todo, done: true };
      }
      return todo;
    });
  }

  return previousState;
}

Reducers : filter

// reducers/filter.js

// Types
import { SHOW_ALL, SHOW_COMPLETE } from "../actions";

// Initial Data structure
const initialState = "ALL";

// filterReducer
export default function filter(previousState = initialState, action) {
  // Change Filter
  if (action.type === SHOW_ALL) {
    return "ALL";
  }

  if (action.type === SHOW_COMPLETE) {
    return "COMPLETE";
  }

  return previousState;
}

store에서 reducer 경로와 각각 type들의 경로에 주의를 하자.

Twitter Facebook LinkedIn

Taeyoung Kim(RaccoonCode96)

20210615 Redux01 : Redux의 개념, Store, Action, Reducer, 데이터 구조에 따른 설계, combineReducers, reducers 모듈화

Redux 01

Redux Basic

단일 스토어 사용 준비

Actions (액션)

액션 생성자

액션이 하는 일

액션 준비

Reducers (리듀서)

createStore()

정리

State 설계01 : state가 객체 형태의 데이터에 boolean 상태를 가지는 경우

Actions 설계

Reducer 설계

사용

State 설계02 : todo의 배열(todos)과, filter 값을 가지는 경우

Actions 설계

Reducer 설계

사용

Key Point

combineReducers

CombineReducers 사용

combineReducers를 구성하는 각 reducer의 모듈화 (파일로 분리 관리)

Reducers : reducer

Reducers : todos

Reducers : filter

공유하기

참고

[Design Pattern] MVC 패턴

[Node.js] 백준 - 기본 수학 문제 1 : 달팽이는 올라가고 싶다, ACM호텔, 부녀회장이 될테야

[Node.js] 백준 - 기본 수학 문제 1 : 손익분기점, 벌집O(1), 분수찾기O(1)

[Node.js] 백준 - 함수&문자열 문제 : 셀프 넘버, 한수, 아스키 코드, 숫자의 합, 알파벳 찾기, 문자열 반복, 단어 공부, 단어의 개수, 상수, 다이얼, 크로아티아 알파벳, 그룹 단어 체커