[코딩애플;React]Redux - Redux Toolkit 설치

1.Redux

:Props없이 state를 공유할  수 있게 도와주는 라이브러리

js파일에 state를 보관해서 모든 컴포넌트가 다 꺼내쓸 수 있어서 props 전송이 필요없음.

 

2.Redux 설치

npm install @reduxjs/toolkit react-redux 

*redux toolkit는 redux의 개선버전. 문법이 좀 더 쉽다.

 

*설치 전 확인 사항

package.json을 열어서 react와 react-dom의 항목 버전이 18.1 이상인지 확인하기. 아니면 직접 수정하기 (18.1.0)

{

  "name": "shop",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@reduxjs/toolkit": "^2.0.1",

    "@testing-library/jest-dom": "^5.17.0",

    "@testing-library/react": "^13.4.0",

    "@testing-library/user-event": "^13.5.0",

    "axios": "^1.6.5",

    "bootstrap": "^5.3.2",

    "react": "^18.2.0",

    "react-bootstrap": "^2.9.2",

    "react-dom": "^18.2.0",

    "react-redux": "^9.1.0",

    "react-router-dom": "^6.21.2",

    "react-scripts": "5.0.1",

    "styled-components": "^6.1.8",

    "web-vitals": "^2.1.4"

  },

 

 

3.Redux 셋팅

1) state를 담을 파일을 src에 만들고 위와 같이 세팅해주기.

import {configureStore} from '@reduxjs/toolkit'

export default configureStore({

    reducer:{

    }

})

 

2)index.js파일가서 Provider 라는 컴포넌트와 작성한 파일을 import해주고 밑에 

<Provider store ={import해온 파일}>로  <App/>감싸기

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>

);