Achievement goals

• 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
• Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
• Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
• Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
• Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

Redux

• Redux란?

Redux는 한마디로 상태관리 라이브러리
리덕스가 생겨난 이유는 SPA(single page application)에서 많은 state를 가지게 되고 이런 state를 트리 구조중 하위 브랜치에 state를 보낼경우와 여러 브랜치가 한 state를 사용할 경우 복잡해지는 경우가 많기 때문에 Redux는 이 모든 state를 저장하고 있는 store라고 말 할 수 있다.

• Action(액션)

액션은 애플리케이션에서 저장소로 보내는 데이터 묶음
액션은 자바스크립트 객체이며 액션은 반드시 어떤 형태의 액션이 실행될지 나타내는 type 속성을 가져야 한다. 이 type(타입)은 일반적으로 문자열 상수(const)로 정의
타입들을 별도의 모듈로 분리할수도 있음
store.dispatch() 을 통해서 보낼 수 있다.

const ADD_TO_CART = "ADD_TO_CART";

const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART, //type 은 필수
    payload: {
      quantity: 1,
      itemId
    }
  }
}

• Reducer(리듀서)

Reducer는 액션(객체)를 받아서 새로운 state(객체)를 반환하는 역할

여기까지를 흐름으로 간단하게 정리해 보면

1. store에 모든 state들이 저장
2. react component가 state를 요구
3. action에서 dispatch(action)을 통해서 reducer로 전달
4. 순수 함수인 reducer에서 action을 받아서 새로운 객체(새 상태)를 반환
5. store에 새 상태를 전송

사용법
: reducer는 인자를 두개를 받는다. 첫번째인자는 이전 상태(previous state) 두번째인자는 액션(action)이다.

주의점

• 인수들을 변경 X
• API호출이나 라우팅처럼 사이드 이펙트를 야기하는것들을 사용 X
• Date.now()나 Math.random() 같이 순수하지 않은 함수를 호출 X
• spread syntax나 assign을 사용하여 새로운 객체를 리턴

import { ADD_TO_CART } from "../actions/index";


const itemReducer = (state = initialState, action) => {
// 원래 다양한 action이 들어오기 때문에 switch를 이용
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, {cartItems:[...state.cartItems,action.payload]})
  }
}

• Store(저장소)
  store 는 객체

store가 하는일

• 애플리케이션의 상태를 저장
• getState()를 통해 상태에 접근가능
• dispatch(action)를 통해 상태를 수정가능
• subscribe(listener)를 통해 리스너를 등록

사용법
combineReducers()를 사용하여 모아둔 리듀서를 createStore(리듀서)로 스토어를 생성 할 수 있다. 두번째 인자도 존재하는데, 이 두번째 인자는 초기 상태를 지정해주고 싶을때 사용한다.

const store = createStore(reducer, initState);//initState는 초기값

Work Flow

---

https://velog.io/@hwanieee/Redux
위의 사이트를 참고했다.

오늘 Redux에 대해서 실제로 코딩을 해봤지만 아직 완벽하게 익히진 못했다고 생각한다. 내일 다시한번 연습을 하면서 익혀야겠다.