컴퓨터 정보/리액트

React : 리덕스 미들웨어 사용하기 2탄

혜닝혜루 2022. 12. 28. 15:29
728x90
반응형
미들웨어를 사용해보자

 

미들웨어 함수를 사용하기 위해선 일명 action creator을 만들어야한다.

 

redux 폴더에서 폴더를 하나더 만들어 줄거다 이름은  "actions" 로 만들자

action 폴더안에 파일을 만들어 줄건데 예시로 productAction.js를 만들어보자

 

📙 참고로 redux 파일에는 리덕스 기본셋팅중 하나인 reducers 와 sotre.js도 같이 들어가 있음을 참고하자

 

 

1. ProductAction.js 파일에는 어떤 함수를 사용할것인가?

 

나는 예시로 url을 JSON 파일로 가져와 data를 가져온 함수를 사용할 것이다.

그럼 product.js 있는 함수를 가져다 써보자

 

🎈 여기서 미들웨어는 함수를 사용하는것 까지 알아봤는데 또! 알아야할것은 함수를 리턴한다.
그리고 2개의 매개변수가 있다. 2개는 어떤것일까?  바로....
dispatch, getState 이다.

 

function getProduct (){
  return(dispatch,getState)=>{ }}

설명까지의 코드를 본다면 이런 모습이다.

여기서  dispatch란 기본셋팅했을때 그 dispatch이고, getState는 현재의 state를 정보를 받아볼 수 있다.

function getProduct (searchQuery){
  return async(dispatch,getState)=>{
    let url=`https://my-json-server.typicode.com/tkrkr55/DIOR/products?q=${searchQuery}`
    let res = await fetch(url)
    let data = await res.json()
    console.log(data)
  }
}
export const ProductAction={getProduct}

여기서 내가 가져오고 싶은 값 ( url을 불러와 Json으로 변환하고 그 데이터를 가져오고 싶은걸 가져온다)을 안에 넣는다.

그리고 export를 사용해 데이터를 가져온 값에 import해서 가져와보자.

 

🎈 주의할점 export를 할때 const를 달아줘야하는거 잊지말자

 

 

2. 내가 가져온 데이터는 product.js 파일에 있었는데 거기서 import를 하자

import {ProductAction} from '../redux/actions/ProductAction'
import {useDispatch} from 'react-redux'

1.export를 한 ProductAction을 들고와야 하는데 여기서 product.js에 파일에 import할때 주의할점은

우리가 {getProduct}로 export 객체반환을 했기때문에 { 객체명 } 으로 들고와야 한다.

그리고.. 이 action을 콜을 해줄려면 여전히 dispacth를 import 해서 가져와야 한다.

 

2.  useDispatch를 가져온다 'react-redux'에서

 

3. 🎈 주의할점이 있다.

dispatch를 사용할때 보통 ({ type: "이름"}) 이런식으로 사용을 하는데 여기서 바로 type을 써버리면

원래 기존방식처럼 미들웨어로 가는게 아니라 바로 store로 가버린다는점이다.

 

4. 우리가 불러온 미들웨어의 객체를 넣어줘야 한다.

 const dispatch = useDispatch();

  
  const getProduct = ()=>{

    let searchQuery =query.get("q")|| "";
    dispatch(ProductAction.getProduct())
    
  }

 

ProductAction.getProduct() 를 넣어주면 우리가 만든 미들웨어 actions 안에있는 ProductAction의 파일들을 불러오게 된다.

 

 

5. 여기서 중간점검을 통해 데이터를 눌렀을때 미들웨어에 잘 나오는지 확인을 해보기 위해 콘솔에 출력을 해보았다.

값이 잘 들어오는걸 확인할 수 있었다.

 

 

 

6. 이제 dispatch를 통해 reducer로 보내야 한다.

 

productAction.js

function getProduct (searchQuery){
  return async(dispatch,getState)=>{
    let url=`https://my-json-server.typicode.com/tkrkr55/DIOR/products?q=${searchQuery}`
    let res = await fetch(url)
    let data = await res.json()
    dispatch({type:"GET_PRODUCT_SUCCESS",payload:{data}})
  }
}

export const ProductAction={getProduct}

값을 잘 불러왔다면  reducer에 보내는게 원칙이다. dispatch란? action으로 넘겨주는 값들을 말한다.

매개변수의 dispatch가 그값의 역할을한다.  type:" 이름" , payload: {data} 

타입의 이름과 url에서 가져온 data를 리턴을 해주면 자동으로 action 으로 넘어가고 reducer로 간다.

 

 

7. reducer에서 처리해야할 작업

let initalState ={}

function productReducer(state=initalState,action){
  let{type,payload} =action
  switch(type){
    case "GET_PRODUCT_SUCCESS":
      return {...state,productList:payload.data}
    default : 
    return{...state}
    }

}

export default productReducer;

 

🎈 주의 : 이 문법은 새로운 문법이 아니므로 리덕스와 미들웨어의 구조 이해로만 봐주세요.

 

 

 

8. product 에 넘어와 useSeletor 처리하기

 const productList = useSelector(state=>state.productList)

 

 

이렇게 처리까지 해~줘야! 비로소...끝이난다

 

자! 이제 데이터가 잘나오는지까지 테스트를 해보자

 

 

짜..란......데이터가 잘나온다.

오늘의 리덕스 내용은 여기까지이다.

 

 

 

 

 

 

 

 

 

☕ 리덕스를 배우고나서..

 

어디선가 코딩은 재능이다 라는 댓글을 본적이 있다. 미들웨어 느낀점에서 왜 이런 🐕 소리를 하는건지 모르겠지만

새로운 지식을 얻을때마다 배울건 산더미고 내가 기억해내는건 일부구나 라고 느낄때가 많다.

그런데 이런 지식도 즐기면서 하는사람들이 진짜 코딩신 이라고 하는데 나는 사실 그렇진 않다.

이런 새로운 지식을 얻고 내걸로 만들면 또 새로운 업데이트가 되어있고 하다보니 스트레스를 받는건

사실이다. 하지만 내가 오류없이 온전히 집중해서 새로운걸 배우고 화면에 잘나왔을때

재미를 느끼는것도 사실이다. 나는  집중도의 차이에서 코딩의 실력이 왔다갔다 한다.

요즘 연말이다보니 스스로 슬럼프가 오고 약속도 나가다 보니 코딩공부를 쉬었는데 

머리를 좀 식히고 오니 다시 공부머리가 생겼나보다 ㅎ..물론 어렵긴하지만 그전에  리덕스를 봤을때

복잡하고 또 코드를 바꾼다고?!!해서 하기싫어지는 그런 마음이 생겼었다.

그때는 너무 공부만  해서 머리 데이터가 한계가 온 시점이였을것이다.

그러다 보니 스스로 쉬어야  할때가 있구나 라는걸 알았고 생활패턴을 만들면서 공부를 해야겠다고 느끼게된

시점이다. 독학으로 공부하다보니 발전성이 있는걸까 싶지만 전에 배우던 내용을

스스로 혼자 만들고 해낼때 발전한다는것에 만족감을 느끼고 앞으로도 그렇게 기준을 잡고 할 예정이다.

 

 

728x90