Redux Toolkit 사용

Redux를 쉽게 사용하기 위해서

Redux Toolkit을 사용해보자

 

npm install @reduxjs/toolkit react-redux

 

Redux Toolkit의 구성 요소와 사용법

configureStore	redux 스토어 생성, 미들웨어와 DevTools를 기본적으로 통합	const store = configureStore({ reducer: { ... } });
createSlice	상태와 리듀서를 한 번에 정의 (코드 간결), 액션 생정자(action creators)를 자동 생성	const slice = createSlice({ name, initialState, reducers });
createAsyncThunk	비동기 작업을 쉽게 처리, 상태를 관리	const thunk = createAsyncThunk('name', async (args) => { ... });
useSelector	Redux 스토어에서 상태 읽기	const value = useSelector((state) => state.someValue);
useDispatch	Redux 액션 디스패치	const dispatch = useDispatch(); dispatch(action);

 

Redux Toolkit을 사용해야 하는 이유는

아래와 같다

 

• Redux를 쉽게 사용하도록 설계된 공식 라이브러리
• Redux의 복잡한 설정과 반복적인 코드 줄이고 효율적으로 상태를 관리하도록 도움
• 비동기 상태 관리와 DevTools 통합이 기본 제공
• Redux Thunk로 비동기 작업
  • action → middleware → reducer → store
  • 액션이 디스패치되어 리듀서에서 처리되기 전에 특정 작업을 수행
  • middleware에서 작업 수행 후 reducer에 전달, 전달된 값이 store에 전달되면 모든 UI에 반영
• immer 통합 - 상태 업데이트 시 불변성을 유지하는 복잡한 코드를 자동으로 관리