[Redux] Redux-toolkit 을 시작하기

이제 Redux-toolkit 를 사용해보자.

Redux 를 안쓰는 이유는 Redux 외에도 Redux-actions 나 Redux-thunk 등등.. 설치할게 추가적으로 많다고 한다.

깔끔하게 하나만 사용하기 위해 그리고 최신 라이브러리 사용을 위해 ^^ Redux-toolkit 를 써보려고 한다.

* 만약 기존 프로젝트에 Redux 가 설치되어있다면 삭제하고 깔아도 무방!

 

Redux 설치/셋팅하기

1. 일단 설치하자

# NPM
npm install @reduxjs/toolkit

# Yarn
yarn add @reduxjs/toolkit

 

2. store.js 파일을 생성하자

그리고 상태관리할 state 를 선언하자~

import { configureStore, createSlice } from "@reduxjs/toolkit";

// useState 와 비슷한 역할
// createSlice({
//     name: 'state이름',
//     initialState:'값'
// })

let stock = createSlice({
  name: "user",
  initialState: [
    {
      p_id: 0,
      brand: "드롭드롭드롭",
      title: "소프트쉬폰 커튼 SAILING TO THE FOREST",
      cost: "84,000",
      deliveryFee: "3000",
    },
  ],
});

export default configureStore({
  // state 등록
  reducer: {
    // 작명: user.reducer
    user: user.reducer,
    stock: stock.reducer,
  },
});

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import store from "./store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}> // 바로 여기! 이곳에 Provider 태그를 사용한다
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);
reportWebVitals();

 

 

Redux 의 state 변경하기

- state.js 에 state 를 수정해주는 함수 reducer 내부에 만들기

-  dispatch 선언 ->  원하는 시점에서 수정 함수 실행 요청 (실질적인 실행 x)

(dispatch 는 store.js 로 요청을 보내주는 함수이다)

- 실제 함수 실행 (store.js 에서)

 

컴포넌트의 수가 많은 상황에서 버그 추적에 용의하다.

프로젝트의 사이즈가 커질수록 도움이 된다.

 

 

아직 작성중 ...