MVC 패턴의 한계를 보완하기 위해 나온 Flux 패턴. 단방향 데이터 흐름을 통해서 상태 변화가 일어났을 때 손쉽게 파악할 수 있다 😎 오늘 포스팅할 Redux는 이러한 Flux 패턴을 충실히 구현해냈되 보다 간결하고 단순하게 사용이 가능하다.
Redux
a single centralized place to contain the global state
- 리덕스는 상태 관리를 위한 패턴이고 라이브러리이다. 상태는 action을 통해 업데이트되고, 리덕스를 사용함으로써 상태는 예측가능하게 관리된다.
- 리덕스는 애플리케이션 내에서 언제, 어디서, 왜, 어떻게 상태가 업데이트되었고 상태 변화가 일어났을 때 로직이 어떻게 동작하는지 이해하는데 도움을 준다.
🌈 리덕스 규칙
- 단 하나의 스토어가 존재한다.
- 상태는 읽기 전용 상태로 불변성 유지되어야 한다.
- 직접 변경하지 않고,
spread 연산자
또는Object.assign
를 사용해서 newState 를 반환해라.
- 직접 변경하지 않고,
- 리듀서는 순수한 함수이다.
- 리듀서 함수는 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); // 상태가 업데이트될 때마다 렌더 함수 호출해줘
-
'FE > React' 카테고리의 다른 글
React HOC에 대해 알아보자 (0) | 2022.02.07 |
---|---|
useSelector, useDispatch로 리덕스에 편하게 접근해보자 (1) | 2022.01.23 |
React 렌더링 퍼포먼스 개선 (3) | 2021.12.29 |
Redux 불변성을 지키면서 상태 변화를 손쉽게 하는 방법, immer (0) | 2021.02.15 |
리덕스가 등장하기 전까지 이야기, MVC 패턴의 한계와 Flux의 등장 (0) | 2021.02.15 |