[redux] 처음 사용해보기

2 minute read

[Redux] 처음 사용해보기!

Redux

Redux의 상태관리 순서

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

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

Action

Action은 말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체

/* 액션 타입 정의 */
// 액션 타입은 주로 대문자로 작성함 
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';

/* 액션 생성함수 정의 */
// 액션 생성함수는 주로 camelCase 로 작성함 
const decrease = () => ({
  type: DECREASE
    text // 액션안에는 type 외에 추가적인 필드를 마음대로 넣을 수 있음 
});

Reducer

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

/* 리듀서 만들기 */
// 위 액션 생성함수들을 통해 만들어진 객체들을 참조하여
// 새로운 상태를 만드는 함수 생성 
// 주의: 리듀서에서는 불변성을 꼭 지켜줘야 함!!!

function reducer(state = initialState, action) {
  // state 의 초깃값을 initialState 로 지정했습니다.
  switch (action.type) {
    case INCREASE:
      return {
        ...state,
        counter: state.counter + 1
      };
    case DECREASE:
      return {
        ...state,
        counter: state.counter - 1
      };
    
    default:
      return state;
  }
}

Store

Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할. Redux 앱의 state가 저장되어 있는 공간이다. createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성할 수 있다.

import { createStore } from 'redux';

const store = createStore(rootReducer);

Dispatch

Dispatch는 Reducer로 Action을 전달해주는 함수. Dispatch의 전달인자로 Action 객체가 전달됨.

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

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

Redux의 세 가지 원칙

1. Single source of truth

동일한 데이터는 항상 같은 곳에서 가지고 와야 한다. 즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙이다.

2. State is read-only (상태는 읽기전용)

상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미한다. 기존의 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해주는 방식으로 해주면, 나중에 개발자 도구를 통해서 뒤로 돌릴 수도 있고 다시 앞으로 돌릴 수도 있다. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙이다.

3. Changes are made with pure functions (변화를 일으키는 함수, 리듀서는 순수한 함수)

변경은 순수함수로만 가능하다는 뜻으로, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙이다.

리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받는다.
이전의 상태는 절대로 건들이지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환
똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환

Share on

Twitter Facebook LinkedIn

강혜원