redux-devtools 개발자도구에서 보기

구글링해봐도 잘 적용이 되지 않았다ㅠㅠ

 

Redux Toolkit의 configureStore를 설정할 때 devTools 옵션을 활성화해야 하는데

 

1. store.js에서 configureStore 설정 확인하기

configureStore 함수에서 devTools: true 옵션을 추가해 Redux DevTools를 활성화할 수 있다.

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

import userReducer from "./user/user.slice";

import categoriesReducer from "./categories/categories.slice";

import productsReducer from "./products/products.slice";

import cartReducer from "./cart/cart.slice";

export const store = configureStore({

    reducer: {

        user: userReducer,          

        category: categoriesReducer,

        products: productsReducer,

        cart: cartReducer

    },

    ⭐ devTools: process.env.NODE_ENV !== 'production',

});

 

2. 브라우저에서 Redux DevTools 설치 확인

Chrome에서  Redux DevTools 확장 프로그램을 설치해야한다.

 

3. Provider로 스토어 전달

index.js 파일에서 이미 <Provider store={store}>로 앱에 Redux 스토어를 전달하고 있으므로, DevTools가 활성화되어 있다면 상태를 볼 수 있습니다.

import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App.jsx'

import '../src/global.scss'

import { Provider } from 'react-redux'

import { store } from './store/index.js'

ReactDOM.createRoot(document.getElementById('root')).render(

  <Provider store={store}>

    <App />

  </Provider>,

)

 

'

 

짠~~~ 너무 쉽다