Redux

JavaScript 상태관리 라이브러리

redux

1. Predictable
-> 일관되게 동작 다양한 환경에서 실행

2. Centralized
-> 상태와 로직을 중앙에서 관리

3. Debuggable
-> Redux DevTools를 통해 상태가 언제, 어디서, 왜, 어떻게 변경되었는지 추적 가능

4. Flexible
-> 사용자 요수사항에 맞는 다양한 생태계

Store

state를 모아둔 곳

import { createStore } from "redux";

Reducer

데이터를 수정하는 함수

const reducer = () => {
    return "hello";
}

const store = createStore(reducer);

console.log(store.getState());

Action

reducer가 해야하는 일

const reducer = (state, action) => {
    return state;
}

Dispatch

Action을 전달

  // dispatch 선언
  const dispatch = useDispatch((state) => state.cartReducer);
  
  // dispatch 사용
  <button
    className="cart-item-delete"
    onClick={() => {
  	  dispatch(removeFromCart(item.id))	
    }}
  >

Selector

redux에서 선언한 reducer 선택

  const menu = useSelector(state=>state.menuReducer)
  const cart = useSelector((state) => state.cartReducer);

flux 패턴

하나의 상태 저장소와 이를 변경하는 Dispatcher를 통해 단방향 순환 구조

1. Action - Dispatcer - Model -View
2. Model(Store)라는 상태를 가지며, 계층구조가 없다.
3. View는 Acion은 호출한다.

Redux Thunk

비동기 작업 미들웨어

참고
https://wonit.tistory.com/344