React - Redux Toolkit 사용해보기

상태관리 라이브러리인 redux를 사용해보니 불편한 점을 느끼게 되었습니다. 불필요하게 여러번 작성해야하는 동일한 코드, 그에 따라 파일의 양 또한 늘어나게 되었습니다. 그러던 중 redux toolkit을 접하게 되었습니다. 그래서 매우 간단하게 redux toolkit을 처음 사용해보면 내용을 정리하기 위해 글을 적었습니다.

먼저 프로젝트에 redux toolkit을 추가해줍니다.

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

이후 redux 폴더를 만들어 준 후 redux/Sidebar/sidebarSlice.js, redux/store.js 이렇게 두 개의 파일을 만들어주었습니다.

sidebarSlice.js

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

export const slice = createSlice({
  name: 'sidebar', // prefix
  initialState: {
    isOpen: false
  },
  reducers: {
    open: (state) => {
      state.isOpen = true;
    },
    close: (state) => {
      state.isOpen = false;
    }
  }
});

export const { open, close } = slice.actions;
export const selectIsOpen = (state) => state.sidebar.isOpen;

export default slice.reducer;

먼저 redux toolkit에는 createSlice라는 기능이 내장되어있습니다. redux와 다르게 action type, action creator, reducer 이 3개의 기능을 한번의 정의할 수 있습니다.

액션 타입은 아래 코드에서 선언한 name/reducer method명 으로 정의됩니다.

  name: 'sidebar', // prefix

state는 아래 코드처럼 정의해준 후 사용할 파일에서 useSelector를 이용하여 접근할 수 있습니다.

export const selectIsOpen = (state) => state.sidebar.isOpen;

store.js

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import logger from 'redux-logger';

import sidebarReducer from './Sidebar/sidebarSlice';

const middleware = [...getDefaultMiddleware(), logger];

export default configureStore({
  reducer: {
    sidebar: sidebarReducer
  },
  middleware
});

store.js에서는 redux toolkit에 내장되어 있는 configureStore를 이용해서 store를 생성해줍니다.

index.js

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

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

Provider를 이용하여 App.js를 감싸줍니다.

Sidebar.js

import { useSelector, useDispatch } from 'react-redux';
import { open, close, selectIsOpen } from '../../redux/Sidebar/sidebarSlice';

const Sidebar = ({ width, height }) => {
  const [xPosition, setX] = React.useState(-width);

  const isOpen = useSelector(selectIsOpen);
  const dispatch = useDispatch();

  const toggleMenu = () => {
    if (isOpen === false) {
      dispatch(open());
      setX(0);
    } else {
      dispatch(close());
      setX(-width);
    }
  };
  return()

};

Sidebar.js 파일에서는 위와같이 action들과 useSelector, useDispatch를 추가해서 사용할 수 있습니다.