[React] Redux toolkit사용하기

정훈·2022년 5월 27일
0

Redux란?

state를 어디서든 사용할 수 있게 해주는 편리한 라이브러리다. 프로젝트 규모가 커질수록 state관리가 지저분해지는데(props -> props -> props...)
redux를 사용하면 state를 비교적 깔끔하게 사용 가능하며, 일반 props방식과 다르게 자식 -> 부모방향으로 역이동도 가능하다.

React-toolkit

기존 react-redux보다 좀 더 간단하게 사용할 수 있다.

import { applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import { combineReducers } from "redux";

얘내들을 더이상 안써도 된다!

Redux Toolkit Tutorial

우선 앱을 설치하고..

npx create-react-app new-folder

redux를 설치한다.

npm install @reduxjs/toolkit react-redux

yarn 사용자는
yarn add npm @reduxjs/toolkit react-redux

기본설정

숫자 증감기능이 있는 앱을 만들어보자.


store 생성

./src/redux/store.js

import { configureStore } from '@reduxjs/toolkit'

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

export default store;

index.js에 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>
);

reducer 생성

.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를 넣어도 되지만
관리 편하게 하려고 밖에 별도로 뺐다.

store에 reducer연결

import { configureStore } from "@reduxjs/toolkit";
//reducer import, 작명은 자유롭게
import counterReducer from "../redux/reducer/countSlice";

export default configureStore({
  reducer: {
    //기존 redux의 combine기능
    conter: counterReducer,
  },
});

componet에 연결

./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;



끝.
profile
꾸준히!

0개의 댓글