[TIL] Day51 #Redux #Cmarket Redux

2022.07.06(Wed)

[TIL] Day51
[SEB FE] Day50

☑️ Redux

✋ Redux는 React없이도 사용할 수 있는 상태 관리 라이브러리

📎 Redux 상태 관리 순서

1. 상태가 변경 이벤트 발생 → 변경될 상태 정보가 담긴 Action 객체 생성
2. Action 객체가 Dispatch 함수 인자로 전달
3. Dispatch 함수가 Action 객체를 Reducer 함수로 전달
4. Reducer 함수는 Action 객체 값 확인 후, 값에 따라 전역 상태 저장소인 Store 상태 변경
5. 상태가 변경되면, React는 화면 리렌더링

Action 👉 Dispatch 👉 Reducer 👉 Store

🫠 Redux에선 위와 같은 순서로 데이터가 단방향으로 흐름

🌊 Action

어떤 액션을 취할 것인지 정의해 놓은 객체

// payload 필요X
{type: "INCREASE'} // type은 대문자 & Snake_Case로 작성하기!

// payload 필요O
{type: "SET_NUMBER', payload: 10} // payload로 구체적인 값 전달

✋ type(해당 Action 객체가 어떤 동작을 하는지 명시) 필수 지정!

✋ Action 객체 생성 함수를 만들어 사용하는 경우가 많음 ⇒ 액션 생성자(Action Creator)

// [Action Creator]

// payload 필요X
const increase = () => {
	return {
		type: 'INCREASE'
	}
}

// payload 필요O
const setNumber = (num) => {
	return {
		type: 'SET_NUMBER',
		payload: num
	}
}

🌵 Dispatch

Reducer로 Action을 전달해주는 함수

// Action 객체 직접 작성하는 경우
dispatch({type: 'INCREASE'});
dispatch({type: 'SET_NUMBER', payload: 10});

// Action Creator 사용하는 경우
dispatch(increase());
dispatch(setNumber(10));

// => Action 객체를 전달받은 Dispatch함수는 Reducer 호출

🥀 Reducer

Dispatch에게서 전달받은 Action객체의 type값에 따라서 상태를 변경시키는 함수

const count =1;

const counterReducer = (state = count, action) { // 인자로 초기상태 설정
	switch(action.type). // Action객체의 type값에 따른 조건문
		case 'INCREASE':   // action === 'INCREASE'
			return state + 1;
		case 'DECREASE':   // action === 'DECREASE'
			return state - 1;
		case 'SET_NUMBER': // action === 'SET_NUMBER'
			return action.payload;
		default:  // 위의 조건에 모두 해당되지 않을 때 기존 상태 return
			return state;
} // Reducer가 리턴하는 값이 새로운 상태!

✋ Reducer가 순수함수여야 외부 요인으로 인해 엉뚱한 값으로 상태가 변경되는 일이 없어짐

// 여러 개의 Reducer를 사용하는 경우
// combineReduers() 메서드를 이용해서 하나의 Reducer로 합져줄 수 있음
import {combineReduers} from 'redux';

const rootReducer = combineReducers({
	counterReducer,
	anyReduer,
	...
});

📁 Store

상태가 관리되는 하나뿐인 저장소 역할
즉, state가 저장되어 있는 공간

import {createStore} from 'redux';

const store = createStore(rootReducer);

📎 Redux Hooks

1. useSelector()

   : 컴포넌트 & state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드

   import {useSelector} from 'react-redux'; // 'redux'에서 불러오는게 아니라는 것에 주의!
   
   const counter = useSelector(state => state.counterReducer)
   console.log(counter); // 1

2. useDispatch()

   : Action 객체를 Reducer로 전달해주는 메서드

   import {useDispatch} from 'react-redux';
   
   const dispatch = useDispatch();
   dispatch(increase());
   console.log(counter) // 2
   
   dispatch(setNumber(10));
   console.log(counter) // 10

📎 Redux 3원칙

1. Single source of truth
   : 동일한 데이터는 항상 같은 곳에서 가지고 와야 함
   👉 Redux에선 데이터를 저장하는 하나뿐인 공간인 Store 존재
2. State is read-only
   : 상태는 읽기 전용
   👉 Action 객체가 있어야만 상태 변경 가능
3. Changes are mad with pure functions
   : 변경은 순수함수로만 가능
   👉 상태가 엉뚱한 값으로 변경되는 일이 없도록 해야 함

---

☑️ [Pair] Cmarket Redux

오늘은 어제 구현했던 Cmarket Hooks 기능들을 Redux를 활용하여 Refactoring해보는 시간을 가졌다.

⌘ Action

// action types
export const ADD_TO_CART = "ADD_TO_CART";
export const REMOVE_FROM_CART = "REMOVE_FROM_CART";
export const SET_QUANTITY = "SET_QUANTITY";
export const NOTIFY = "NOTIFY";
export const ENQUEUE_NOTIFICATION = "ENQUEUE_NOTIFICATION";
export const DEQUEUE_NOTIFICATION = "DEQUEUE_NOTIFICATION";

// actions creator functions

// 장바구니 담기 ACTION
export const addToCart = (itemId) => {
  return {
    type: ADD_TO_CART,
    payload: { // payload로 구체적인 값을 설정해주기
      quantity: 1, // 장바구니에 담을 땐 수량이 1로 고정되어 있으므로 값을 1로 설정
      itemId,
    },
  };
};

// 장바구니 삭제 ACTION
export const removeFromCart = (itemId) => {
  return {
    type: REMOVE_FROM_CART,
    payload: {
      itemId, // 삭제 action시에는 quantity(수량) 값은 굳이 필요없으므로 id만 값 설정!
    },
  };
};

// 수량변경 ACTION
export const setQuantity = (itemId, quantity) => {
  return {
    type: SET_QUANTITY,
    payload: {
      itemId,
      quantity,
    },
  };
};

// ...

⌘ Dispath

1. 장바구니에 추가

   const handleClick = (item) => {
   	// 장바구니에 클릭한 해당 품목이 존재하지 않는다면
       if (!cartItems.map((el) => el.itemId).includes(item.id)) {
         dispatch(notify(`장바구니에 ${item.name}이(가) 추가되었습니다.`));
         dispatch(addToCart(item.id)); // dispatch()로 아이템 추가에 대한 액션 전달
       } else { // 클릭한 품목이 이미 장바구니에 있는 품목이라면
         dispatch(notify("이미 추가된 상품입니다."));
       }
     };

2. 장바구니에서 품목 삭제

   const handleQuantityChange = (quantity, itemId) => {
       dispatch(setQuantity(itemId, quantity)); // 장바구니 아이템 수량변경 액션 전달
   };

3. 장바구니에서 품목 수량 변경

   const handleDelete = (itemId) => {
       setCheckedItems(checkedItems.filter((el) => el !== itemId));
       dispatch(removeFromCart(itemId)); // 장바구니 아이템 삭제 액션 전달
   };

⌘ Reducer

import { REMOVE_FROM_CART, ADD_TO_CART, SET_QUANTITY } from "../actions/index";
import { initialState } from "./initialState"; // dummy data

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      return Object.assign({}, state, { // Object.assign()을 통해 새로운 객체 생성
		// 기존 데이터에 새로운 데이터 즉, action.payload를 더해줌
        cartItems: [...state.cartItems, action.payload],
      });

    case REMOVE_FROM_CART:
	  // 장바구니 아이템 id와 action.payload의 id를 비교해서 거른 아이템
      let deletedItem = state.cartItems.filter(
        (el) => el.itemId !== action.payload.itemId
      );
      return Object.assign({}, state, {
        cartItems: deletedItem, // 거른 삭제할 아이템을 cartItems로.
      });

    case SET_QUANTITY:
	  // 장바구니 아이템 id와 action.payload의 id가 같을 때의 해당 아이템의 index
      let idx = state.cartItems.findIndex(
        (el) => el.itemId === action.payload.itemId
      );
      
      return Object.assign({}, state, {
        // 수정할 아이템 전, 후는 기존 데이터로 유지하되,
        // 수정할 아이템인 action.payload를 그 중간에 끼워서 더해줌
        // 이 블로그에서 방법 아이디어 얻음! -> https://florescene.tistory.com/m/199
        cartItems: [
          ...state.cartItems.slice(0, idx), // 
          action.payload,
          ...state.cartItems.slice(idx + 1),
        ],
      });
    default:
      return state;
  }
};

export default itemReducer;

🫠 Reducer의 불변성(Immutability)
: Redux의 state 업데이트는 immutable한 방식으로 변경해야 함
🤷‍♀️ why? Redux 장점 중 하나인 변경된 state를 로그로 남기기 위해
👉 Object.assign()을 통해 새로운 객체를 만들어 리턴! (spread 연산자를 사용하는 것과 유사한 기능)

➰ Test 12/12 Pass ✌️

---

어제도 그렇고, 오늘도 저녁에 외식을 해서 저녁 시간에 공부량이 현저히 줄어들었다.🥲
어젠 아예 못했구, 오늘도 집오니까 졸리고 피곤해서 집중이 안되는 느낌쓰..
내일 하루도 흐지부지 보내지 말기 🙏
그리고 계속 고민하고 고민했던 모던자스 딥다이브 도서를 ebook으로 구매했다. 10월까지 부지런히 읽어보자 🦾