redux toolkit의 동작원리
component → action을 dispatch → reducer(new state를 반환해서 store에) → store(new state가 들어감) → component에서 사용… 반복
-
store: state 변수를 담아두는 곳
- store 규모가 클 경우: 규모가 클 경우에는 상태를 카테고리별로 분류하는 경우가 일반적이다.
-
dispatch: action을 전달해주는 매개체 역할을 한다.
-
action: 순수한 오브젝트로, 상태의 변경을 어떤식으로 할지를 나타낸다. 액션은 스토어에 저장되어 있는 데이터를 꺼내오는 유일한 방법이다. 어떠한 이벤트 소스에서오는 데이터 이든지 간에, 결국 액션을 통해서 dispatch해야 한다.
-
action은 첫번째: type(action의 종류를 식별할 수 있는 값), 두번째: payload(실행에 필요한 임의의 데이터)
예를 들면 type에는 type: ‘counter(createSlice내에 name값)/decrease(reducers중에 하나의 reducer 이름)’ 으로 들어간다. -
여기서 예로 든 counter는 다른 사람이 쓴 코드와 충돌을 막기 위해 prefix로 사용한 것이다.
-
reducer: state값을 update 해주는 함수.
아무나 store를 건들 수 없다. 그래서 reducer가 문지기 역할을 한다. 이전 state와 action을 합쳐 새로운 state를 만들어준다. -
기존에는 액션생성함수와 액션타입을 선언해 사용했다면, redux toolkit을 사용하면 해당 액션이 dispatch되면 바로 state를 가지고 해당 액션을 처리한다.
-
createSlice: 기존의 redux를 사용할 때는 createAction으로 action의 type(기본값), payload를 별도로 설정해줘야 했고, reducer를 설정하기 위해 createReducer도 생성하여 switch 등의 조건문으로 action의 type을 구분해 특정 로직을 수행했다.
-
이 createAction과 createReducer를 모두 가진 함수가 createSlice이다.
