Redux-Toolkit 사용해보기

개요

  저는 상태 관리 라이브러리로 주로 Recoil 을 사용해 왔었고, Redux 는 부트캠프나 간단한 튜토리얼만 진행을 했었습니다.

  개인적으로는 Recoil 을 먼저 사용해봤기때문에 Redux 는 다른 미들웨어들 Redux-Saga 등을 사용하지 않을 것이라면 과하게 복잡한 것 아닌가 생각했었습니다.

  하지만 공고를 확인하거나 여러 통계를 보았을때 Redux 의 사용 비율이 압도적이기 때문에 학습할 필요가 있다고 느꼈습니다.

  그래서 현재 진행하고 있는 사이드프로젝트에 Redux 를 활용하며 학습하기로 했고, 레거시 취급을 받는 Redux 보다 Redux-Toolkit 을 사용하기로 결정했습니다.

설치

이번 사이드프로젝트에서는 ReactJS 에서 사용할 것이기 때문에 아래와 같이 설치했습니다.
$ npm i @reduxjs/toolkit react-redux

세팅

1. 우선 store.js 를 생성하고 configureStore 을 불러와서 아래와 같이 store 세팅을 합니다.

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

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

export default store;

2. 이제 isDarkSlice.js 를 생성하고 createSlice 를 불러와서 slice 를 설정해줘야합니다.

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

const isDarkSlice = createSlice({
  name: 'isDarkSlice',
  initialState: { value: false },
  reducers: {
    click: (state) => {
      state.value = !state.value;
    },
  },
});

export default isDarkSlice;
export const { click } = isDarkSlice.actions;

3. 설정한 slice 를 store 에 적용해줍니다.

import { configureStore } from '@reduxjs/toolkit';
import isDarkSlice from './feature/isDarkSlice';

const store = configureStore({
  reducer: {
    isDark: isDarkSlice.reducer,
  },
});

export default store;

4. Provider 컴포넌트로 store 가 사용될 컴포넌트들을 감싸줍니다.

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './app/store';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

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

5. 원하는 컴포넌트에서 useDispatch, useSelector Hooks 를 활용하여 적용합니다.

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import styled, { ThemeProvider } from 'styled-components';
import { lightTheme, darkTheme } from './theme';
import { click } from './app/feature/isDarkSlice';
import './style.css';

const Wrapper = styled.div`
  color: ${(props) => props.theme.textColor};
  background-color: ${(props) => props.theme.bgColor};
`;

function IsDarkToggle() {
  const dispatch = useDispatch();
  const isDark = useSelector((state) => {
    return state.isDark.value;
  });

  return (
    <Wrapper>
      <div>
        <h2>Am I Dark Mode?</h2>
        <h3>{isDark ? 'Yes' : 'No'}</h3>
        <button
          onClick={() => {
            dispatch(click());
          }}
        >
          Change Dark/Light Mode
        </button>
      </div>
    </Wrapper>
  );
}

export default function App() {
  const isDark = useSelector((state) => {
    return state.isDark.value;
  });
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <IsDarkToggle />
    </ThemeProvider>
  );
}

결과

StackBlitz 링크