Redux-Thunk(1)

리액트 리덕스 미들웨어는 비동기 작업을 할때 가장 많이 사용된다. Redux-Thunk 를 이용하면 액션 객체가 아닌 함수를 디스패치 할 수 있다.

실제 코드는 다음과 같다.

실제 redux-thunk의 코드는 14줄밖에 되지 않는다.

const thunk = store => next => action =>
  typeof action === 'function'
    ? action(store.dispatch, store.getState)
    : next(action)

즉, action이 함수타입이면 함수를 디스패치 할 수 있게 해줌.

만약 위의 액션 생섬함수에 setTimeout의 비동기처리함수를 사용하고싶으면6번줄처럼 thunk를 사용하면된다. 그리고

const onIncrease = () => {
    dispatch(increaseAsync());
  };
const onDecrease = () => {
    dispatch(decreaseAsync());
  };

이렇게 액션을 발생시키면됨.

간단히 말해서,

위는 리덕스 미들웨어를 만들때의 템플릿인데 예시의 코드와 적용해보자면

const thunk = store => next => action => {}
const decreaseAsync = () => dispatch => setTimeout(()=>dispatch(),1)

첫번째 store는 리덕스 스토어 인스턴스이고 그안에 dispatch, getState, subscribe내장 함수들이 존재함.
두번째 next는 액션을 다음 미들웨어에게 전달하는 함수. next(action)이런 형태로 사용.
세번째 action은 현재 처리하고 있는 액션객체.

7장. 리덕스 미들웨어

Redux Fundamentals, Part 6: Async Logic and Data Fetching | Redux