redux toolkit 간단 사용법

어플이 점점 커지고, 다양한 기능을 활용하려면 결국 전역 상태관리는 필요하게 되는 것 같습니다.

1. redux toolkit 설치

// npm
npm install @reduxjs/toolkit react-redux

// yarn
yarn add @reduxjs/toolkit react-redux

2. store 만들기

import { configureStore } from '@reduxjs/toolkit';
import locationReducer from './modules/location';

const store = configureStore({
  reducer: {
    location: locationReducer,
    // 추후에 만들어질 리듀서가 들어갔습니다.
  },
});

export default store;

• reducer 값 안에 계속해서 reducer를 추가할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from 'store';

const rootElement = document.getElementById('root');
if (rootElement instanceof HTMLElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(
    <Provider store={store}>
      <App />
    </Provider>,
  );
}

• 만들어 놓은 store를 Provider로 App을 감싼 후 속성으로 store를 넣어줍니다.

3. 슬라이스, 리듀서 만들기

import { type PayloadAction, createSlice } from '@reduxjs/toolkit';
import { type RootState } from 'store';

interface StateType {
  location: string;
}

const initialState: StateType = {
  location: '서울',
};

export const locationSlice = createSlice({
  name: 'location',
  initialState,
  reducers: {
    setLocation: (state, action) => {
      state.location = action.payload;
    },
  },
});

export const locationActions = locationSlice.actions;
export default locationSlice.reducer;

• 간단하게 전달받은 위치를 저장하는 역할을 합니다.
• 리듀서 내부에서 액션을 수행하고 상태를 변경해줍니다.

4. 상태 변경하기 (useDispatch)

const dispatch = useDispatch();

const locationBtnHandler = () => {
  dispatch(locationActions.setLocation(locationKr));
  navigate('/home/nearby');
};

• 컴포넌트 내부에서 dispatch(액션.리듀서함수(payload))로 데이터를 가져옵니다.

5. 상태 가져오기 (useSelector)

const location = useSelector((state) => state.location.location);

• useSelector(state => state.슬라이스key.해당슬라이스의state)를 변수에 담아 상태를 가져옵니다.

---

참고 : https://redux-toolkit.js.org/tutorials/quick-start