[코드숨] 리액트 13기 -8강/2.리덕스 툴킷 Redux Toolkit, PureComponent

Redux Toolkit

• Redux Toolkit 공식 문서
• Redux Toolkit - 한글 번역

지금까지 redux를 이용해서 개발할때 복잡하고 코드가 많았다.

어플리케이션이 복잡해질수록 다양한 액션과 리듀서에 대한 관리가 복잡해지며 편의를 위한 패키지 추가가 많이 필요했다.

immer, ducks pattern 등을 공식적으로 지원한다. redux-thunk가 비동기 처리를 위해 기본으로 포함됐다.

• ducks pattern: redux를 사용할 때 action과 reducer를 하나의 파일에서 사용하는 패턴. redux-toolkit은 이를 slice.js 란 파일에 모아둔다.

사용해보시면 편한게 딱 느껴짐..!

redux의 악명 높았던 사용법이 정말 많이 개선된 걸 느낄 수 있다. 또한 입맛에 따라 redux-saga, redux-observable와 같은 비동기 처리 패키지를 추가할 수 있다.

설치

# NPM
npm install @reduxjs/toolkit

 

slice.js 파일을 생성 (action creator와 reducer를 동시에 만들어주는 작업 진행)

 

*"@reduxjs/toolkit"이 설치되어있다면  "redux-thunk"는 따로 설치안해줘도 됨(이미 갖고있음)

 

configureStore

Redux의 createStore 함수에서 개발을 더 쉽게 하게 도와주는 기본 설정들이 들어있는 스토어 생성 함수이다. configureStore를 사용하면 기본으로 Redux thunk가 추가된다.

• 기본으로 포함된 미들웨어

 

정정

강의 24분 10초에서 createStore에서 미들웨어 적용하는 것을 삭제하는데, Redux Toolkit은 스토어를 만들 때 편리하게 만들 수 있도록, 기본 옵션들이 포함된 store를 만들 수 있게 해주는 configureStore함수를 지원합니다. 그리고 이 함수로 store를 만들 때 기본으로 thunk 미들웨어를 지원합니다. 따라서 createStore 대신 configureStore함수를 이용해서 store를 생성해야 올바르게 동작합니다.

import { configureStore } from '@reduxjs/toolkit'

import reducer from './slice';

const store = configureStore({ reducer });

export default store;

 

ducks pattern

---

PureComponent

• Pure Components
• 메모이제이션
• React.memo() 현명하게 사용하기
• useCallback

 

컴포넌트는 상태를 직접 관리할 수 있다. (useState)

상태를 관리하지 않고 props만 넘겨주는 컴포넌트

 

추가 정정

영상의 코드에서 if문 위치는 useCallback 아래에 있어야 합니다.

const handleChange = useCallback(({ name, value }) => {
  dispatch(changeReviewField({ name, value }));
}, [dispatch]);

const handleSubmit = useCallback(() => {
  dispatch(sendReview({ restaurantId }));
}, [dispatch, restaurantId]);

if (!restaurant) {
  return (
    <p>Loading...</p>
  );
}