[front-end] 비동기 요청 처리하기 - redux-promise-middleware

redux-thunk를 쓰다가 더 편하게 쓰기 위해 redux-promise-middleware를 추가해서 사용하기로 하였다. 기존의 suffix를 더 간단하게 LOADING, SUCCESS, FAILURE로 변경해서 쓰려고 하니 middleware is not a function 이라는 error가 계속 떴다.

혹시나 싶어서 store에 걸려있는 middleware들을 한개씩 지워가며 어디에서 발생하는 것인지 테스트해보았다.

(...)

import { createLogger } from 'redux-logger'; 
import { default as ReduxThunk } from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';

const logger = createLogger();
const pm = promiseMiddleware({
    promiseTypeSuffixes: ['LOADING', 'SUCCESS', 'FAILURE']
});

const reducers = combineReducers(modules);

const store = createStore(reducers, applyMiddleware(logger, ReduxThunk, pm));

(...)

logger나 ReduxThunk만 middleware에 걸려있을 때는 오류가 안나는데 suffix를 고친 pm이 들어가기만 하면 에러가 나는 것을 발견했다. stackoverflow에 비슷하게 검색해봐도 잘 안나오길래 redux-promise-middleware 깃에 들어가서 docs를 살펴보니 suffix를 바꾸고 싶을 경우 아래와 같이 하라고 나와있었다.

import { createPromise } from 'redux-promise-middleware';

applyMiddleware(
  createPromise({
    promiseTypeSuffixes: ['LOADING', 'SUCCESS', 'ERROR']
  })
)

그래서 docs를 참고해서 바꿔주니까 다시 잘 돌아간다. 아마 새로 버전이 release되면서 바뀐 것 같다.

(...)

import { createLogger } from 'redux-logger'; 
import { default as ReduxThunk } from 'redux-thunk';
import { createPromise } from 'redux-promise-middleware';

const logger = createLogger();
const pm = createPromise({
    promiseTypeSuffixes: ['LOADING', 'SUCCESS', 'ERROR']
});

const reducers = combineReducers(modules);

const store = createStore(reducers, applyMiddleware(logger, ReduxThunk, pm));

(...)

아, 그리고 suffix는 원래 FAILURE를 쓰려고했는데 ERROR가 타이핑도 더 단순하고 글자 수도 짧아서 ERROR로 바꿨다ㅋㅋㅋㅋ