Redux 이해

Redux 사용 이유

Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
즉 예측 가능한 상태관리를 하려고 사용한다
Redux 는 리액트 뿐 아니라 자바스크립트에서도 사용!

구체적인 예시

• 전역상태관리
• props 드릴링 (React)

리덕스는 상태변화를 관리하기 위해 상태변화를 일으키는 시점과 형태의 제약을 둠

단 방향 구조

(View → Action + Dispatcher → Middleware→ Reducer → Store) → View

• View 에서 유저가 일으키는 행동에 맞게 Action 객체가 생성되고,
  내가 업데이트 하려는 ‘의도’를 입력으로 넣어주기 위해서, 그리고 그것이 순수한 데이터 형태이기 위해서 Action 객체를 사용한다.

• Action은 Dispatcher 를 통해 Reducer 로 전달되고,

• Action의 type에 따라 Reducer 내에 미리 정해져 있던 로직이 Store 를 변경하고,

• 변경된 Store의 내용이 View 로 반영되는 패턴

작동 원리 예시

const createStoreFromScratch = (reducer) => {
  let state;
  let listeners = [];
  // 클로저 내부 변수에 저장된 상태를 그대로 리턴
  
  const getState = () => state;
  // 향후 dispatch에 반응할 listener를 등록
  // listener를 등록 해제할 수 있도록 unsubscribe 함수를 리턴
  
  const subscribe = (listener) => {
  	listeners.push(listener);
  return () => {
  	listeners = listeners.filter((l) => l !== listener);
  };
};
// reducer로 새로 생성한 state로 기존 state를 교체하고 listener를 호출
const dispatch = (action) => {
  state = reducer(state, action);
  listeners.forEach((listener) => listener());
};
// 빈 dispatch를 실행해서 reducer에서 받은 initialState를 적용
  dispatch({});
  // 외부에서 클로저 내부 변수에 접근할 수 있도록 함수를 리턴
  return { getState, subscribe, dispatch }; // store
};