React : 리덕스와 미들웨어(middleware) 를 기본 셋팅 해보자.

참고 : 이글은 최신 업데이트된 리덕스와 다를수 있습니다.

리덕스의 기본을 익히기 위해 작성되었으니 참고로만 봐주세요. :) 🎈

📙 리덕스의 구조

https://github.com/reduxjs/redux-thunk

GitHub - reduxjs/redux-thunk: Thunk middleware for Redux

해당 사이트에서 사용방법이 자세히 나와있으니 따라하셔도 됩니다.

---

 

리덕스 기본셋팅

 

 

1. 터미널에 기본 라이브러리 설치하기

npm install redux react-redux 설치하기

2. thunk 설치하기

npm install redux-thunk

 

---

3. index에 Provider 셋팅하기 

+ index 에 셋팅할때  주의할점은 BrowerRouter을 사용했다면 삭제하면 안됩니다.

import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux';
import store from './redux/store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </Provider>
);

Provider 안에 BrowerRouter을 감싸고 그안에 App을 감싸줘야 합니다.

 

 

4. redux 라는 폴더를 생성후   index에 Provider = {store} 의 js 파일을 만들어 기본 셋팅을 합니다.

import {createStore } from "redux";
let  store = createStore(reducer)

export default store;

🎈 참고 : createStore을 사용하는 방식은 예전 버전 임으로 참고만 해주세요 (흐름만이해)

 

 

 

5.  redux안에 폴더 reducers (여러개 reducer을 만들것임) 를 만들어 reducer.js를 만들어 줍니다.

let initalState ={}

function productReducer(state=initalState,action){}

export default productReducer;

reducer을 기본문법을 보자면 초기값을 넣어줄 let inialState  ={ } 가 들어갑니다.

reducer은 기본적으로 함수가 들어가며 매개변수를 2개를 받는데 state는 초기값 inialState 이고 두번째는 action을 받아옵니다. 

여기서 action은 dispatch를 통해 전달이 되는데 이값은 뒷쪽에 정리를 해둘때 설명을 하겠습니다.

 

 

 

6.  reducers 을 만들었다면 꼭 store에 import 하는것도 잊지말아야 합니다.

import {createStore ,applyMiddleware } from "redux";
import productReducer from "./reducers/ProductReducer";

let  store = createStore(productReducer)

export default store;

이제 그럼 store에 reducer을 import 해줘야 사용할 수 있겠죠? productReducer을 export 해줬으니 똑같이

reducer = > productReducer 해줘야 합니다.

 

7.  store을 완성했다면? index.js에 import  하는것도 잊지말아야 합니다.

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

 

미들웨어 기본셋팅

✅ store에서 미들웨어 import 하기

 

import {createStore,applyMiddleware } from "redux";
import thunk from "redux-thunk"
import productReducer from "./reducers/ProductReducer";


let  store = createStore(productReducer,applyMiddleware(thunk))

export default store;

applyMiddleare 을 redux 에서 가져온다.

import tunk 는 from "redux-thunk" 에서 가져온다.

 

store변수에  applyMiddlewoare 써주고 (thunk)를 감싸주면 끝!