230714) 리덕스 툴킷 기본 세팅

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

let products = createSlice();

1. 리덕스 툴킷 설치

- npm install react-redux @reduxjs/toolkit

 

2. index.js에 세팅

 

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

// configureStore 에서 {} 넣고, 그 안에 reducer: {} 넣고 변수에 만들어서 담는다.
const store = configureStore({
  reducer: {},
})

 

3. Provider 세팅

import { Provider } from 'react-redux';

아래 코드처럼 Provider, store 삽입

<React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
</React.StrictMode>

4. createSlice 추가

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

let 이름 = createSlice({
  name: "(여기에 구별하는 이름 삽입)",
  initialState: (기존 React 형태에 사용했던 useState initialState값 삽입),
});

5. 다른 곳에서 사용할 수 있게 reducer에 넣기

const store = configureStore({
  reducer: {
    이름: 이름.reducer,
  },
})

---

App.js 에 세팅

 

원래 있던 useState 지우고 아래 삽입

import { useSelector } from 'react-redux';

const 이름 = useSelector((state) => state.이름)
  // index.js의 리듀서 키명을 이름에 넣음

오늘도 잘 해냈다!