Redux Toolkit

Redux Toolkit

Redux 로직을 작성하기 위한 공식 권장 접근 방식
Redux 코어를 둘러싸고 있음
Redux 앱을 빌드하는 데 필수적인 패키지/기능이 포함되어 있음
Redux 작업을 단순화하고 실수를 방지할 수 있음

 

Redux Toolkit + 리액트 + 타입스크립트 프로젝트 생성

npx create-react-app [프로젝트 이름] --template redux-typescript

기본으로 카운터 애플리케이션이 생성됨

 

Redux Toolkit 설치 (기존 프로젝트에 설치)

npm install @reduxjs/toolkit react-redux

 

Store 생성

configureStore 를 사용하여 Redux Store 생성
reducer 함수를 인수로 전달받음

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {},
});

 

React에 Redux 스토어 제공

src/index.js 에서 애플리케이션을 <Provider> 로 감싸줌
저장소를 prop 으로 전달하여 React 구성 요소에서 사용할 수 있음

import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';

...

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

 

Redux State Slice 생성 (Redux Store Reducer 부분)

createSlice 를 호출하면서 Slice 의 이름, 초기 State, 리듀서 함수를 전달함
리듀서 함수는 Immer 라이브러리를 사용하여 상태를 muteate 할 수 있음
(실제로 상태를 변경하지 않음)

import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState, AppThunk } from '../../app/store';
import { fetchCount } from './counterAPI';

export interface CounterState {
  value: number;
}

const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

 

Store에 Slice Reducer 추가

리듀서 매개변수 내부에 필드를 정의함으로써
스토어에 이 슬라이스 리듀서 함수를 사용하여
해당 상태에 대한 모든 업데이트를 처리하도록 지시함

import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

 

useSelector & useDispatch

export function Counter() {
  const count = useAppSelector(selectCount);
  const dispatch = useAppDispatch();
  ...
}

useSelector 를 사용해 저장소에서 데이터를 읽어올 수 있음

 

<button 
  aria-label="Increment value" 
  onClick={() => dispatch(increment())}
>
  +
</button>

useDispatch 를 사용해 Action 을 전달할 수 있음