Redux 기초 개념 요약본 / 리덕스란?

MVC 패턴의 한계를 보완하기 위해 나온 Flux 패턴. 단방향 데이터 흐름을 통해서 상태 변화가 일어났을 때 손쉽게 파악할 수 있다 😎 오늘 포스팅할 Redux는 이러한 Flux 패턴을 충실히 구현해냈되 보다 간결하고 단순하게 사용이 가능하다. 

 

Redux

a single centralized place to contain the global state

• 리덕스는 상태 관리를 위한 패턴이고 라이브러리이다. 상태는 action을 통해 업데이트되고, 리덕스를 사용함으로써 상태는 예측가능하게 관리된다.
• 리덕스는 애플리케이션 내에서 언제, 어디서, 왜, 어떻게 상태가 업데이트되었고 상태 변화가 일어났을 때 로직이 어떻게 동작하는지 이해하는데 도움을 준다.

🌈 리덕스 규칙

1. 단 하나의 스토어가 존재한다.
2. 상태는 읽기 전용 상태로 불변성 유지되어야 한다.
   • 직접 변경하지 않고, spread 연산자 또는 Object.assign 를 사용해서 newState 를 반환해라.
3. 리듀서는 순수한 함수이다.
   • 리듀서 함수는 oldState와 action 객체를 파라미터로 받는다.
   • 이전 state를 직접 건드리지 말고, 새로운 state를 반환한다.
   • 똑같은 파라미터로 호출된 리듀서 함수는 항상 똑같은 반환값을 유지해야 한다.
     • 리듀서 함수 내에서 랜덤값을 만들거나 new Date() 같은 함수 사용 안된다. 이런 함수는 파라미터가 같아도 다른 결과값을 반환하게 된다.
   • 리듀서는 default 케이스로 기존 상태를 반환해야 한다.

리덕스의 중심 store

리덕스의 중심은 스토어 이다. 스토어는 전역 상태의 컨테이너이다.

• 절대, 리덕스 스토어 내에 있는 상태를 직접 수정하거나 변경해서는 안된다.
• 상태를 업데이트할 수 있는 유일한 방법은 action 을 만들고 스토어에 액션을 dispatch 하는 것이다.
• 액션이 스토어에 디스패치되면, 리듀서가 작동하여 새로운 state를 반환한다.
• 스토어는 subscribers에게 상태가 업데이트된 것을 알려주고, UI가 새로운 데이터로 업데이트된다.

생성 프로세스

Action

• 액션 이름 정의

  • 액션 이름은 고유해야 한다.

• 액션 생성 함수 생성

  • 액션 객체는 type을 포함한 객체이다.

Reducer

들어오는 액션에 따라, 기존 상태를 어떻게 변경해 새로운 상태를 반환할 지 알려주는 역할을 한다.

• 초기값 생성

  const initialState = {
    value: 0
  }

• 리듀서 함수 정의
• 리듀서는 oldState와 액션함수를 파라미터로 받는다.
  • 액션이 발생되면 리듀서가 oldState와 action을 받아와 newState 값을 반환한다.

Store

• 스토어 생성

  • 하나의 어플리케이션 안에는 하나의 스토어가 존재한다.

  • store는 createStore 함수 사용.

    import { createStore } from 'redux';
    
    const store = createStore(reducer);

  • dispatch : 액션을 발생시킨다. 스토어 내장 함수 dispatch를 사용해서 파라미터로 액션을 넘겨주면 된다.

    store.dispatch({ type: 'counter/decremented' }) // 액션 type과 payload를 넘겨준다.

  • subscribe : subscribe 함수 안에 특정 함수를 넣어 두면, 액션을 통해 state가 변경될 때마다 특정 함수가 실행된다.

    const render = () => {
       const state = store.getState();
        ...
    }
    render();
    store.subscribe(render); // 상태가 업데이트될 때마다 렌더 함수 호출해줘