Redux Tookit

Redux란

• Javascript를 위한 것
• state container
• predictable

Redux를 이용해야하는 이유

predictable한 방법으로 어플리케이션의 전역상태를 관리하기 위해

Redux Toolkit

• Redux의 몇 가지 단점을 보완하기 위해 등장
• Redux를 사용하려면 Redux말고 다른 여러 패키지들을 설치해야함
• Redux를 사용하려면 boiler plate 코드가 많이 필요함
• Redux의 축약된 버전으로 어려운 부분을 간단하게 보여줌

언제 Redux를 사용해야 하는지?

• 관리해야하는 상태가 여기저기 많은 경우
• app 상태가 자주 업데이트 되는 경우
• app이 중간 이상 크기의 코드베이스를 가지고 여러 사람이 협업하는 경우

3가지 주요 컨셉

1. store - shop
   app의 상태를 나타냄
2. action - cake ordered
   어떤 행동(action)이 발생했는지
3. reducer - shopkeeper
   store과 action을 연결

3가지 원칙

1. app의 전역상태는 한 개의 store에 객체로 저장된다

• tracking the number of cakes on the shelf

{
numberOfCakes: 10
}

2. 상태를 바꾸기 위한 유일한 방법은 action을 dispatch하는 것. 상태를 업데이트하기 위해서는 action을 통해 Redux가 알게 해줘야 함. 상태 객체를 직접적으로 업데이트할 수는 없음

• Scan the QR code and place an order - CAKE_ORDERED

{
type:'CAKE_ORDERED'
}

3. state tree가 action에 의해서 어떻게 업데이트 됐는지 구체화 하기 위해서는 pure reducers(순수 함수)를 써야함

• Reducer - (previousState, action) => newState

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

---

1. actions

• app이 store와 상호작용할 수 있는 유일한 방법
• 순수 자바스크립트 객체
• app에 발생한 내용을 설명하는 type 속성을 가짐
• type 속성은 일반적으로 문자열 상수(string constants)로 정의된다
• action creator은 객체를 리턴하는 함수를 말한다

function orderCake() {
  return {
    type: CAKE_ORDERED,
    quantity: 1,
  };
}

2. reducers

• app의 상태가 action에 의해서 어떻게(HOW) 바뀌었는지 구체화함
• state와 action을 인자로 받고 next state를 리턴함
  (previousState, action) => newState

3. store

• app에는 1개의 store가 존재
• getState()를 통해 상태에 접근
• dispatch(action)을 통해 상태가 업데이트 되도록 함
• subscribe(listener)을 통해 listener를 register 함

---

리덕스의 단점

1. 많은 boilerplate code를 요구함
   • Action
   • Action object
   • Action creator
   • Switch statement in a reducer
2. 리덕스와 함께 쓰이는 패키지들을 일일히 install 해야함
   • Redux-thunk
   • Immer
   • Redux-devtools

---

Redux Toolkit

Redux의 단점을 보완한 toolset