redux middleware
async : 비동기함수 – await로 값이 받아올 때 까지 기다림
예시 : 이전 일반 redux의 비동기함수 사용방법과 동일함
export let addValueAsync=()=>(dispatch)=>{
setTimeout(()=>{dispatch(addValue())},1000)}
즉, reducer로 만든 action 함수를 thunk처럼 중괄호에 넣는건 동일하다. 대신 중간 소괄호 안의 이름이 앞에 붙어야 한다. jsx에서 useDispatch로 쓸 때는 동일하게 dispatch(함수이름)으로 들어간다. 여기서 쓰는 dispatch는 위에 적은 thunk 중간 소괄호 이름인 dispatch와는 다르다
API를 받아오는 경우 데이터를 서버에서 받아와야 하기 때문에 시간이 걸린다. 그러므로 async-await를 추가한다.
예시
export let weatherAPI=()=>async(dispatch)=>{
dispatch(startLoading())-필수는 아님. 로딩되고 있음을 표현하기기 위해 추가한 것
let response=await fetch(API주소);
let data=await response.json();
console.log(data)-data가 정상적으로 받아와졌는지 확인하는 구간
dispatch(action함수(data의 특정값이 필요하다면 넣어주기))
}
try{} / catch{} : try-catch구문을 통해서 오류가 날 확률이 있는 코드를 try에 넣고 오류가 났을 때 실행할 내용을 catch에 넣는다
middleware의 경우 store.js에서 configureStore의 reducer 부분 다음에 middleware:(getDefaultMiddleware)=>getDefaultMiddleware().concat()형식이다. 형태만 익혀두자