Redux Tool Kit 초기 세팅

리덕스 툴킷으로 프로젝트를 끝냈으나  정리를 안하면 무조건 까먹을 것이니 정리를 해봐야겠다. 

(정리를 해도 까먹겠지만..)

 

일단 리덕스를 쓰는 이유는 

1.파일 하나에 state를 몰아 넣어서 상태관리가 편함

2.프롭스 드릴링을 할필요가 없음 

 

리덕스 툴킷은 리덕스의 개선버전이라고 보면 됨 문법이 좀더 쉬워짐(4줄 써야될거 2줄됨)

 

리덕스 툴킷 설치 하려면

리액트 & 리액트 돔 이 18.1.x 버전 이상이여야함 

npm install @reduxjs/toolkit react-redux

 

 

 

리덕스툴킷  세팅은 

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

store.js 파일을 만들어서 위 코드 입력

state들을 보관하는 파일역할을 한다. 

 

그리고

 

import { Provider } from "react-redux";
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
);

 

1.index.js 파일에 Provider라는 컴포넌트와  store 파일을 import한다. 

2.위 코드와 같이  <Provider store={import해온거}> 이걸로 <App/> 을 감싸면 됨