개인적으로 개념을 다지기 위한 리덕스 첫번째 시간

Redux란?

상태를 전역으로 관리해주는 도구입니다. 기존 DOM제어 방식이 아닌 store라는 영역에서 상태를 관리한다.

redux를 제외하고 Jotai, recoil, zustand 등 많은 도구들이 있지만, Redux에 대해서 한번 더 개념을 잡고자 이 글을 작성합니다.

Redux 작동 원리

1. component 에서 dispatch를 통해 action을 호출한다.
2. action에서 정의된 내용이 reducer로 인해서 handling이 되며,
3. handling으로 인한 변경된 값이(update) store에 저장 및 관리가 된다.
4. store에서는 subscribe를 통해서 실시간으로 화면에 노출

제가 유튜버라는 가정하에 아래 코드를 작성하겠습니다.

action ?

// 아래 ADD_SUBSCRIBER 만들어주는 이유는 오타방지 및 자동완성에 도움이 됩니다.
const  ADD_SUBSCRIBER = ‘ADD_SUBSCRIBER’
const addSubscriber = () => {
  return {
    type: ADD_SUBSCRIBER // 타입명
  };
};

reducer ?

// 초기값 설정
const initialState = { subscribe: 500 }

// state=initialState : 어떠한 state값이 없을 경우 기본값 설정
// switch case문으로 type마다 어떠한 handling을 할지 만들어보자
const reducer = (state=initialState, action) => {
  switch(action.type) {
    case ADD_SUBSCRIBER: // 위에서 만든 action
      return {
        …state, // 스프레드기법 - 기존값을 유지(불변성)
        subscribers: state.subscribers + 1
        // state값에 1을 추가
      }
    default: return state; // case 이외에 경우일 경우
  }
};

store ?

// redux에서 createStore를 불러오며, 이 때 함수 실행은 하지 않는다.
const createStore = redux.createStore;

// 불러온 createStore에 reducer를 넣어준다.
const store = createStore(reducer);

// store를 콘솔하면, store에 대해서 여러 정보가 찍히게 됩니다.
console.log(store);

// 아래 중 getState를 콘솔로 찍어보면
{
  dispatch: [Function: dispatch],
  subscribe: [Function: subscribe],
  getState: [Function: getState],
  replaceReducer: [Function: replaceReducer],
  [Symbol(observable)]: [Function: observable]
}

// initialState의 정보가 나오게 된다.
console.log(store.getState());

// console -> initialState = { subscribe: 500 }

middleware

middleware는 redux에서 상태를 변경하기 전 즉, action과 reducer 사이에 추가적으로 작업을 시행할 때 사용됩니다. 여러 middleware가 있겠지만 대표적으로 logger, redux-saga 등이 있습니다.

// npm i redux redux-logger 설치 후 불러온다.
const redux = require('redux');
const reduxLogger = require('redux-logger');
const logger = reduxLogger.createLogger();

// applyMiddleware는 store에 미들웨어를 추가할 때 사용된다.
const applyMiddleware = redux.applyMiddleware;

// store의 2번째 인자로 설치한 미들웨어를 넣어준다.
const store = createStore(reducer, applyMiddleware(logger));

// 그리고 store에 dispatch로 addSubscriber를 호출하면
store.dispatch(addSubscriber());

// logger로 인해서 출력창에 아래처럼 찍힌다.
action ADD_SUBSCRIBER @ 13:35:35.571
   prev state { subscribers: 500 }
   action     { type: 'ADD_SUBSCRIBER' }
   next state { subscribers: 501 }

미들웨어 부분은 더 개념을 잡고 작성해야겠다.
많은 강의도 듣고, 따라해봤지만 개념을 확실히 잡고 넘어가야 한다는 것을
다시 느꼈다.

추후 redux-toolkit도 개념 및 사용방법에 대해서 정리해야지...😭

위 내용은 code Scalper님의 유튜브 영상을 참고하였습니다.