[Redux Toolkit Tutorial] Cake shop Scenario

https://youtu.be/0awA5Uw6SJE

 Redux Toolkit Tutorial 2-4강

npm init -y 
package.json 파일 생성

npm install redux
redux package 설치 

이 강의에서는 케잌샵 시나리오를 리덕스에 비유한다.

Entities	Activities
샵 - 선반에 케이크를 저장 주인 - 카운터에 있음 손님 - 매장 입구에 있음	손님 - 케이크를 주문함 주인 - 선반에서 박스를 포장함           (케이크 재고 파악등을 위해 ) 영수증을 만든다

 

리덕스 핵심개념

리덕스의 핵심개념을 케잌샵 시나리오에 비유하여 설명한다.

케이크 샵 시나리오	Redux	목적
샵 - 케이크를 안전하게 보관	Store - 애플리케이션의 State를 안전하게 유지한다.	애플리케이션의 State를 안전하게 유지한다.
케이크 주문  - 어떤 케이크 몇 개인지, 주문을 받는다.	Action - 시나리오에서 발생한 일을 설명	무슨일이 일어났는지 설명
샵 주인 - 주문을 받아서 케이크를 선반에서 빼내고, 다음 주문을 위해 재고 추적	Reducer - action을 받아서 store를 수정	Store와 action을 연결

 

 

리덕스의 3가지 원칙

1. 앱의 전역상태는 하나의 저장소안의 단일 객체 내부에 저장된다.

{
  numberOfCakes : 10
}

 

2. 상태를 변경하는 유일한 방법은 무슨일이 일어났는지를 설명하는 객체인 액션(주문)을 dispatch함으로써 이루어진다.
state 객체를 직접적으로 update할 수 없다.

손님은 케이크 선반으로 직접 들어가서 케이크를 꺼내올 수 없다.
QR코드를 스캔해서 주문할 수 있다 
{
   type : 'CAKE_ORDERED'
}

3. 액션에 기반한 상태트리 업데이트를 구체화하기 위해 순수 리듀서를 작성해야한다.
Reducer - (previousState, action) => newState

Shop주인은 Reducer, 초기상태와 주문을 받아서 현재 케이크 상태 수정 

const reducer = (state= initialState, action) =>{
  switch(action.type) {
     case CAKE_ORDERED : 
        return {
        }
  }
}

 

 

 

1. javascript 앱은 Redux Store를 구독하지만 앱은 직접 상태를 업데이트 할 수 없다.
2. 앱이 State를 업데이트하고 싶으면 액션을 dispatch해야한다. 
3. action이 reducer에게 dispatch전고, redux가 state를 업데이트한다.
4. 앱이 store를 구독하고 있기 때문에, state가 업데이트 되면 업데이트 된 값이 javascript앱에 전달된다. 

 

 

Redux Store의 책임

- 애플리케이션 state를 유지하며 항상 하나의 저장소만 가진다.
- state에 접근할 때는 getState()를 통한다 
- state 변경할때는 dispatch(action)을 통한다.
- subscribe 메소드로 store를 구독하게 하고, subscribe 메소드에 리턴된 함수를 호출하여 구독을 취소할수도 있다.