리덕스.
이거 바로 전에 썼던 TIL에서 리덕스에 관해 아ㅏㅏ주 간략하게 써봤었다.
상태관리를 쉽게하기 위해 데이터들을 Store에 모아두고 그 데이터들을 필요로 하는 컴포넌트에 주는 그런걸로 난 간단하게 이해했다.
근데 그 과정 중간에 리덕스 텅크 라고 중간과정을 또 넣을 수 있다.
목적 : '디스패치를 실행했을 때, 바로 리듀서로 가는 것이 아니라 그 사이에 어떤 작업을 한번 더 해주고 싶을 때' 사용한다. 저희가 강의에서 끝에 "FB"라고 붙여준 것이 썽크입니다.
일반적인 리덕스의 순서는
버튼클릭 → 디스패치 → 리듀서 실행 → 새로운 상태값 생성 및 저장
이다.
근데 리덕스 썽크를 사용하면 이렇게 가능하다.
버튼클릭 → 디스패치 하다가.. → 서버에서 데이터 가져오고 나서 → 마저 디스패치 → 리듀서 실행 → 새로운 상태값 생성 및 저장
즉, 디스패치 과정에서 내가 하고 싶은 일을 하나 더 끼워넣을 수 있다.
(그래서 미들웨어라고 하나보다. 중간에 뭘 한다고.. )
그래서 리덕스썽크는 보통 디스패치 과정에서 비동기 작업을 하고자 할때 사용한다.
서버에서 데이터를 가져오거나 또는 api를 호출하고 나서 어떤 작업을 수행하고자 할때
즉, ~을 하고 ~ 하고자 할때 사용하는 것이다.
그 중간에 하는 작업을 함수로 만들어주며, 우리는 그것을 썽크함수라고 부른다.
바닐라 리덕스와 모든 구조는 같으나, 썽크함수가 하나 추가된다.
// 썽크함수 (화살표 형)
const increaseThunk = () => (dispatch, getState, {history}) => {
// 내용
// dispatch 는 2차 디스패치를 할 때 쓰고,
// getState 는 현재 상태를 조회 할때 사용 할 수 있다.
// { history }는 connected-react-route 패키지 이용 시 사용가능하다.
}
// 또는 (일반형)
function increaseThunk(){
function(dispatch, getState){
// 내용
}
}
그리고 바닐라 리덕스에서는 버튼을 눌렀을 때 dispatch(액션크리에이터) 를 했지만, 리덕스 썽크에서는
버튼을 클릭했을 때 dispacth(썽크함수) 한다. 썽크함수 안에서 dispatch(액션크리에이터)를 수행하기 때문이다.
dispatch(썽크함수) → 내가 중간에 하고 싶은 작업 → dispatch(액션크리에이터)
// usecase
// action type
const INCREASE = 'counter/INCREASE';
// action creator
const increase = () => {type: INCREASE}
// thunk function
const increaseThunk = () => (dispatch) => {
setTimeout(()=>{ // 중간에 1초를 기다렸다가
dispatch(increase()) // 그리고 나서 마저 디스패치를 합니다. 마저 디스패치를 할때는 dispatch 파라미터로 액션크리에이터를 넣어줍니다. (원래 하던거랑 같다)
}, 1000)
}
// reducer
const reducer = (state, action) => {
switch(action.type){
case INCREASE:
return {
...state, number : state.number + 1
}
}
}
