안녕하세요 ! 오늘은 Redux Toolkit을 배워보겠습니다! ╰(°▽°)╯
정말 기초만 정리를 할꺼여서 정보를 깊게 얻고 싶으신분들은 재미로만 봐주세요!
전역상태관리 라이브러리
출처:https://www.slideshare.net/binhqdgmail/006-react-redux-framework
state와 props로만으로 상태관리를 할떄 큰 프로젝트일수록 예상치 못한 오류와
props drilling
이 발생하는데 그걸 해결하기위해 전역상태관리 라이브러리인 리덕스
를 쓰기 시작했습니다.
리덕스는 빠른 오류해결,코드의 가독성 향상,유지보수 향상, 상태 예측(dev tool)등
많은 이점을 가지고 있습니다.
하지만 문제점도 존재합니다.
리덕스 툴킷이란 리덕스의 불편한 점을 보안하기 위해서 나온 개발도구입니다.
간단한 프로젝트가 가능한 필수적인 문법소개후 간단한 예제로 마치겠습니다!
리덕스 설치 : npm install @reduxjs/toolkit
store에 저장할 작은 slice조각을 만들어 주는 api입니다.
문자열로 된 슬라이스 이름,초기값,상태 변화를 정의한 리듀서
로 이루어져있습니다.
추가로 본래 리덕스에서 작성해야 했던 액션타입과 액션함수는
앞서 작성한 슬라이스 이름, 초기값을 바탕으로 createSlice api안에서 자동으로 생성해줍니다.
작은 slice들을 하나의 store에 넣어주는 api입니다.
기본적으로 Redux미들웨어를 추가기능 , redux-thunk , redux devtool등이 내장되어 있습니다.
필수적으로 slice들의 reducer가 들어가야합니다.
간단하게 리덕스 툴킷을 이용해서 버튼을 누르면 숫자가 +1 , -1만큼 카운터되는 예제를 만들어보겠습니다!
import { configureStore } from "@reduxjs/toolkit";
let store = configureStore({
reducer: {},
});
export default store;
2.index.js에 store.js에서 만든 store를 가져와서 store를 받은 provider로 app태그를 감싸줍니다.
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { store } from "./duck/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);
3.store과 app을 연결했으니 store안에 들어갈 slice를 만들어보겠습니다.
counterSlice.js파일안에서 createSlice로 slice를 만들고
store안에 들어갈 counterSlice.reducer와 dispatch할떄 쓰일
counterSlice.actions을 export해줍니다.
import { createSlice } from "@reduxjs/toolkit";
let counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
up: (state, actions) => {
state.value = state.value + 1;
},
down: (state, actions) => {
state.value = state.value - 1;
},
want: (state, actions) => {
state.value = state.value + actions.payload;
},
},
});
export const { up, down, want } = counterSlice.actions;
export default counterSlice.reducer;
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
let store = configureStore({
reducer: { counter: counterReducer },
});
export default store;
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { down, up } from "./duck/counterSlice";
const App = () => {
const dispatch = useDispatch();
const count = useSelector((state) => {
console.log(state);
return state.counter.value;
});
return (
<div>
<h1>Count:{count}</h1>
<button
onClick={() => {
dispatch(up());
}}
>
+1
</button>
<button
onClick={() => {
dispatch(down());
}}
>
-1
</button>
</div>
);
};
export default App;
오늘은 리덕스툴킷의 최소한의 문법만 써서 포스팅해봤습니다.╰(°▽°)╯
그냥 리덕스를 썻을때보다 코드의 양도 줄고 불변성유지를 생각하지 않아도 되어서
되게 편한거 같아요!
아직 부족한 부분이 많아서 더 열심히 해야겠습니다 ㅠ_ㅠ
참고한 사이트:https://redux-toolkit.js.org/