2023.11.28 (화) TIL

Redux toolkit

• 기존의 module에서 ActionCreator,reducer,ActionValue를 Redux toolkit을 통해 한번에 관리하는 것을 말한다
  장점 1. 관리가 편함 2. 가독성이 높아짐 3.toolkit 의 immer에 의해 불변성 유지

Redux 와 Redux toolkit 비교

Redux

const ADD_NUMBER = 'counter/ADD_NUMBER';
const MINUS_NUMBER = 'counter/MINUS_NUMBER';

export const plusN = payload => ({
  type: PLUS_N,
  payload,
);
export const minusN = payload => ({
  type: MINUS_N,
  payload,
);

const initialState = {
  number: 0,
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        ...state,
        number: state.number + action.payload,
      };
    case MINUS_NUMBER:
      return {
        ...state,
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};

Redux Toolkit

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

• 가독성과 , 유지보수, 코드의 간결함이 좋아졌다는 것을 볼 수 있다.

fetch와 axios 의 차이

• JSON Parsing의 유무
  fetch :데이터를 가져온 뒤 한번더 JSON Parsing이 필요
  axios : axios가 JSON Parsing을 해줘 필요 X