결국 다시금 돌아온 생활코딩 Redux 시리즈. 이번 강의는 Redux Toolkit에서 쓸 수 있는 미들웨어, Thunk 되시겠다.
사실 이 강의의 존재를 알고 있었는데, 저번 과제를 할 때는 굳이 이걸 할 필요까지는 없다고 느꼈었다. 네. 그렇게 생각하던 시절이 있었습니다…
그런데 리액트 5주차에서 Firebase의 Cloud Firestore의 데이터를 Redux의 Store한테 전달을 주고받고 하려면 그 중간을 연결해주는 매개체가 필요하다고 한다. 오노…
그래서 다시 돌아왔다, 지옥의 Redux 시리즈 그 4편. 미들웨어로 쓸 수 있는 Thunk를 배워보도록 하자.
Redux에 내장되어 있는 기능 중에선 ‘thunk’라는 기능이 있다. 비동기적인 작업을 Redux로 처리할 때 어떻게 할 수 있을까를 고민해서 만들어진 것이 해당 기능이다. 이번 강의에서는 그 thunk를 이용해 어떻게 하면 좀 더 효율적으로 redux를 이용할 수 있을지를 학습해보자.
<button onClick={async () => {
const response = await fetch('<https://api.countapi.xyz/visits>')
// 서버로부터 fetch를 통해 데이터를 가져옴.
const data = await fetch(response.json());
// 가져온 데이터를 json화하여 변수 data에 저장함.
dispatch(set(data.value));
// set = 액션 크리에이터 함수. 아래처럼 쓰인다.
// export const set (payload) => ({
// type: "counterSlice/set", payload
// })
// 결국 아래와 같이 객체, action이 생성되어 dispatch가 적용된다.
// dispatch({type: "counterSlice/set", payload:data.value})
}}>+ async fetch without thunk</button>
<button onClick={() => {
dispatch(asyncUpFetch());
}}>+async thunk</button>
위의 코드는 fetch를 통해 비동기적으로 응답을 받아 json화로 가공한 뒤, 그 값을 dispatch를 통해 store에 보내는 식으로 만들었다.
근데 코드만 보면 async를 이어주고, await을 통해 fetch를 쓰고.. 또 await을 통해 fetch를 쓰고.. dispatch로 이것저것 설정하고… 코드가 되게 번거로운 작업을 몇 번씩 일으키고 있는데, 거기에 이 코드가 다른 곳에서도 똑같이 쓰게 된다면? 중복이 발생하고, 유지보수는 어렵고, 코드의 양도 많아지는 불상사가 발생할 것이다.
그러면 저 중복을 줄이고 유지 보수를 편하게 할 수 있는 좋은 방법이 있까? 있다. 아래의 코드를 보자.
<button onClick={() => {
**dispatch(asyncUpFetch());**
}}>+async thunk</button>
아까 전 코드에서 async, await, fetch 등을 이용한 과정을 저 asyncUpFetch()에 우겨넣고 그 함수만 호출시켜 액션이 dispatch로 전달되도록 한다면.. 저렇게 한 줄로 표현할 수가 있다면 우리의 코드는 원활하고 깔끔하고 윤택해질 것이다. Wow!