[Redux] 리덕스 기초연습

✅ Redux

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너이다.
Redux를 이용하면 멀리 떨어져 있는 컴포넌트를 연결시키거나, 한 프로젝트 전체에서 참조해야 하는 상태 값이 있는데 모든 컴포넌트에 연결하기 까다로운 경우 유용하게 활용할 수 있다.

✅ Redux 핵심 컨셉

export const addCart = (item) => { // 액션 "생성 함수"
  return {
    type: "ADD_ITEM", // 액션 "객체"
    payload: item,
  };
};

• 액션은 type 속성 값을 가진 자바스크립트 객체

• 액션 생성함수는 그 액션 객체를 생성하는 역할을 하는 함수 **

• 액션 객체를 dispatch 메서드에 넣어서 호출 (useDispatch)

• 액션 생성함수가 생성한 액션 객체는 리듀서를 거쳐 스토어를 업데이트하게 됨

  ⏩ useDispatch

const dispatch = useDispatch()

• 스토어의 내장 함수로, 스토어에 액션 객체를 전달하는 함수. "액션을 발생시킨다라고 이해해도 좋음.
• dispatch의 인자로는 액션 객체를 전달해야 함
• dispatch가 실행되면 액션 객체는 리듀서로 전달 되고, 리듀서 내에 미리 정의해둔 조건문과 action.type에 따라 따라 스토어가 업데이트 됨

⏩ Reducer

(state, action) => nextState // state(혹은 store)와 action 객체를 받고 다음 state 리턴

// cartReducers.js
function cartReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return [...state, action.payload]; // 스토어의 이전 상태에 새로운 item을 추가
		case "DELETE_ITEM":
			return [...action.payload]
    default:
      return state; // 해당 사항 없으면 이전 상태를 그대로 리턴
  }
}

// store/reducer/index.js
import { combineReducers } from "redux";
import cartReducer from "./cartReducer";

export default combineReducers({ cartReducer });```
- 리듀서는 **액션이 발생했을 때 새로운 상탯값을 만드는 함수** **(그냥 자바스크립트 함수!!)**

#### ⏩ Store
```javascript
import React from "react";
import ReactDOM from "react-dom";
import Routes from "./Routes";

import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./store/reducers";

const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <Routes />
  </Provider>,
  document.getElementById("root")
);

• 스토어는 리덕스의 상탯값을 가지는 단일 객체이며, 프로젝트 어디서든 접근할 수 있다 (Provider)
• 액션 ⇒ 미들웨어 ⇒ 리듀서 ⇒ 스토어 업데이트 ⇒ 컴포넌트 업데이트

⏩ useSelector

const items = useSelector((store) => store.cartReducer);

• useSelector를 통해 store의 특정 내용을 가져올 수 있음 (reducer ⇒ store의 key)
• useSelector 는 엄격한 비교 ( === )를 하여, 참조가 달라지면 무조건 업데이트 해준다.
• useSelector에는 두 번째 인자로 동일성을 검사하는 함수를 넣어줄 수 있다. react-redux가 제공하는 shallowEqual을 사용할 수 있으나, 일반적으로 불필요.

⏩ middleware

const middleWare = store => next => action => next(action);

• 미들웨어는 리듀서가 액션을 처리하기 전에 실행되는 함수
• 디버깅 목적으로 상탯값 변경 시 로그를 출력하거나, 리듀서에서 발생한 예외를 서버로 전송하는 등의 목적
• 미들웨어를 설정하지 않으면 dispatch한 액션은 곧바로 리듀서로 보내진다
• 대표적인 리덕스 미들웨어로 redux-logger, redux-thunk, redux-saga 등이 있음