Redux 미들웨어
-
리덕스에서 dispatch를 하면 action이 리듀서로 전달이되고 리듀서는 새로운 state를 반환한다.
-
근데 미들웨어를 사용하면 이 과정 사이에 하고 싶은 작업을 넣어서 실행할 수 있다.
-
보통 미들웨어를 사용하는 이유는 서버와의 통신을 위해서 사용하는 것이 대부분이고 많이 사용되고 있는 리덕스 미들웨어 중 thunk 가 있다.
-
thunk를 사용하면 dispatch를 할 때 객체가 아닌 함수를 dispatch할 수 있게 해준다.
사용 과정
-
thunk 함수를 만들기 :
createAsyncThunk- reduxToolkit 내장 API
-
createSlice > extraReducer에 thunk 등록
-
dispath
-
테스트
- thunk는 2개의 input을 갖는다 1) 이름 : 의미는 크게 없음 2) 함수
//Counterslice.js
export const __addNumber =createAsyncThunk(
"ADD_NUMBER_WAIT",
(payload, thunkAPI)=> {
//수행하고싶은 동작 : 3초를 기다리게 할 예정
setTimeout(()=> {
thunkAPI.dispatch(addNumber(payload))
},3000)
}
)//App.js에서 import 해오고 원래있던 addNumber 대신 __addNumber로 갈아끼운다.정리
리덕스 미들웨어를 사용하면 액션이 리듀서로 전달되기 전에 중간에 어떤 작업을 더 할 수 있다.
Thunk를 사용하면 객체가 아닌, 함수를 dispatch할 수 있게 해준다.
리덕스 툴킷에서 Thunk 함수를 생성할 때는 createAsyncThunk 를 이용한다.
createAsyncThunk() 의 첫번째 자리에는 action value, 두번째 자리에는 함수가 들어간다.
두번째로 들어가는 함수에서 2개의 인자를 꺼내 사용할 수 있는데 첫번째 인자는 컴포넌트에서 보내준 payload이고, 두번째 인자는 thunk에서 제공하는 여러가지 기능이다.
심화
-
Thunk함수 구현
-
리듀서 로직 구현 : reducers → extraReducers -
-
서버 통신 : 100% 성공이 아님
-
지금까지의 redux state(todos, counter)
-
앞으로의 state (isLoading, isError, data)
-
-
기능확인 (netWork) + devtools
-
Store의 값을 조회 + 화면에 렌더링
https://github.com/mookbin/Weekly_react_3/tree/master/study-thunk
