state를 어디서든 사용할 수 있게 해주는 편리한 라이브러리다. 프로젝트 규모가 커질수록 state관리가 지저분해지는데(props -> props -> props...)
redux를 사용하면 state를 비교적 깔끔하게 사용 가능하며, 일반 props방식과 다르게 자식 -> 부모방향으로 역이동도 가능하다.
기존 react-redux보다 좀 더 간단하게 사용할 수 있다.
import { applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import { combineReducers } from "redux";
얘내들을 더이상 안써도 된다!
우선 앱을 설치하고..
npx create-react-app new-folder
redux를 설치한다.
npm install @reduxjs/toolkit react-redux
yarn 사용자는
yarn add npm @reduxjs/toolkit react-redux
숫자 증감기능이 있는 앱을 만들어보자.
./src/redux/store.js
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({
reducer: { }
})
export default store;
기존 redux사용방법과 같다.
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 "./redux/store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);
.src/redux/reducer/countSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const counterSlice = createSlice({
name: "counter",
initialState: {
value: 0,
},
reducers: {
increment(state) {
state.value += 1;
},
decrement(state) {
state.value -= 1;
},
incrementByAmount(state, action) {
state.value += action.payload;
},
resetNumber(state) {
state.value = 0;
},
},
});
export const { increment, decrement, incrementByAmount, resetNumber } =
counterSlice.actions;
export default counterSlice.reducer;
counterSlice 함수안에 initialState를 넣어도 되지만
관리 편하게 하려고 밖에 별도로 뺐다.
import { configureStore } from "@reduxjs/toolkit";
//reducer import, 작명은 자유롭게
import counterReducer from "../redux/reducer/countSlice";
export default configureStore({
reducer: {
//기존 redux의 combine기능
conter: counterReducer,
},
});
./src/component/Counter.js
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import {
decrement,
increment,
incrementByAmount,
resetNumber,
} from "../redux/reducer/countSlice";
const Counter = () => {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(decrement())}>감소</button>
<span>{count}</span>
<button onClick={() => dispatch(increment())}>증가</button>
// payload시 action()안에 넘길 값을 넣어준다.
<button
onClick={() => {
dispatch(incrementByAmount(10));
}}
>
10씩 증가
</button>
<button onClick={() => dispatch(resetNumber())}>초기화</button>
</div>
);
};
export default Counter;