redux1

const redux = require('redux');

//리듀서
//Input(이전 state, Dispatch된 Action) => Output(새로운 state)
const counterReducer = (state = { counter: 0 }, action) => {
  if (action.type === 'increment') {
    return {
      counter: state.counter + 1,
    };
  }

  if (action.type === 'decrement') {
    return {
      counter: state.counter - 1,
    };
  }

  return state;
};

//중앙 스토어
const store = redux.createStore(counterReducer);

//구독
const conterSubscriber = () => {
  const latestState = store.getState();

  console.log(latestState);
};

store.subscribe(conterSubscriber);

store.dispatch({ type: 'increment' });
store.dispatch({ type: 'decrement' });

• Redux : 예측 가능한 상태 컨테이너

예측 가능한
중앙화된
디버깅이 쉬운
유연한

---

• Context api 의 한계

규모가 커질수록 셋업과 관리가 복잡해짐
잦은 상태 변화 시 퍼포먼스 이유가 있음

---

• 리덕스의 기본 원리

리듀서 함수
(스토어 데이터 변경 mutate)
중앙데이터 스토어
(구독 subscription)
컴포넌트

액션 전달(dispatch) =>리듀서 함수

리덕스 코어 컨셉

Dispatch => Action => Reducer => Store

---

• 리덕스 : 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
• 리액트 리덕스 : 리덕스를 위한 리액트 바인딩 공식 도구

Reducer는 state를 항상 덮어쓴다. 만약 어떤 속성을 값을 입력하지 않으면
그 값을 reducer는 undefined 처리하게 된다.

리액트에 리덕스를 사용하면서, 프로젝트가 커지면 관리가 복잡해지고
여러가지 이슈(불변성 관리)가 발생
이를 해결하기 위해 나온 도구가 RTK