[항해 99 주특기] 심화강의 Thunk

미들웨어란

서버와의 통신에 사용하는 것이 대부분이다.

리덕스에서 가장 많이 사용되는 미들웨어는 청크와 사가가 있고 리액트 쿼리도 비슷한 역할을 한다.

청크는 디스팰치안에 객체를 넣었었는데 함수를 디스패치할 수 있게 해줌으로써 어떠한 동작을 실행 할 ㅅ ㅜ있게 해주는 특징이 있다. 

미들웨어가 없을 때는 컴포넌트에서 변화가 일어날때 액션이 리듀서로 전달되고 이게 스토어에 값에 변화를 일으킨다. 디스패치되자마자 액션이 리듀서로 보내져서 새로운 state를 반환하기에 중간에 끼어들 틈이 없었다

미들웨어를 사용하면 이 과정사이에 우리가 하고싶은 작업을 할 수있다.

 

ex) conter에서 1더하기를 눌렀을 때 3초있다가 1을 더하고 싶을 때 사용하는데 대부분의 사용되는 경우는 서버와의 통신을 위해 사용하는 것이기에 redux-thunk에 대해서 알아보자

 

thunk 미들웨어 중 하나로써 dispatch 안에 액션객체가 아닌 함수를 디스패치할 수 있게 해준다 함수안에서 동작을 실행할 수 있게 해준다 함수를 넣으므로써 3초를 기다릴 수 있게 해준다.

 

사용법

1. createAsyncThunk 를 통해서 thunk함수 만들기 리덕스 툴킷 내장API

2. createSlice > extraReduver를 수정해서 thunk 등록

3. dispatch

4. test

청크는 보통 이름 앞에 언더바 2개를 둔다(__thunk)

청크는 인자를 2개 받는데 첫번째 인자는 액션객체같은걸 받고 두번째는 함수인데 이 함수도 인자를 2개 받는다 payload와 thunkAPI라고 불리는 청크 API의 여러가지 기능이다

 

액션이 리듀서로 전달되기 전에 중간에 어떤작으벙르 더할 수 있다

  

---

리듀서 로직을 구현할 때 서버통신을 할떄인데 서버통신이 100%성공하지 않으므로 진행에 관련된 여러 state를 관리해야한다. isLoading isError date이런식으로 state 관리를 많이 하게될 것이다.

 

청크함수의 구현

 

thunk.

서버의 성공을 보장할 수 없기에 try catch문으로 엮는것임 그러니 정보 받는 거 확인하고 엮으면 되겠네

풀필윗밸류 프로미스객체가 리졸브 된 경우 디스패치해주는 기능을 가진 API

리젝트윗밸류를 리젝트 된경우를 디스패치해주는 API

리듀서에게 디스패치를 해줘야하는데 난 작성한 적이 없어 어디로 가는걸까??? 모르니깐 구현을 해야한다 어디서?? extraReducer안에 구현을 해야한다.

통신이 진행중일때 pending는 isloading이 true이다

 

리덕스 미들웨이를 사용하면 액션이 리듀서로 전달되기 전에 중간에 어떤 작업을 수행할 수 있게 해주낟

객체(action object)가 아닌 함수를 dispatch할 수 있게 해준다

따로 thunk를 add하지않고 리덕스 툴킷이 내부 API이기에 바로 사용 가능 두번쨰로 들어가는 함수(첫번쨰는 이름인데 지금은 크게 의미가 없음)는 2개의 인자를 꺼내서 사용하는데 이떄 첫번쨰는 payload고 두번쨰는 thoukAPI (thunk에서 제공하는 여러 기능)이다.