저는 상태 관리 라이브러리로 주로 Recoil
을 사용해 왔었고, Redux 는 부트캠프나 간단한 튜토리얼만 진행을 했었습니다.
개인적으로는 Recoil
을 먼저 사용해봤기때문에 Redux
는 다른 미들웨어들 Redux-Saga
등을 사용하지 않을 것이라면 과하게 복잡한 것 아닌가 생각했었습니다.
하지만 공고를 확인하거나 여러 통계를 보았을때 Redux
의 사용 비율이 압도적이기 때문에 학습할 필요가 있다고 느꼈습니다.
그래서 현재 진행하고 있는 사이드프로젝트에 Redux
를 활용하며 학습하기로 했고, 레거시 취급을 받는 Redux
보다 Redux-Toolkit
을 사용하기로 결정했습니다.
이번 사이드프로젝트에서는 ReactJS
에서 사용할 것이기 때문에 아래와 같이 설치했습니다.
$ npm i @reduxjs/toolkit react-redux
store.js
를 생성하고 configureStore
을 불러와서 아래와 같이 store
세팅을 합니다.import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {}
});
export default store;
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;
slice
를 store
에 적용해줍니다.import { configureStore } from '@reduxjs/toolkit';
import isDarkSlice from './feature/isDarkSlice';
const store = configureStore({
reducer: {
isDark: isDarkSlice.reducer,
},
});
export default store;
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>
);
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>
);
}