[FrontEnd]미들웨어 Redux Thunk

1장. 미들웨어(Middleware) 이해하기

리덕스를 사용 하면서 비동기 작업 (예: 네트워크 요청) 을 다룰 때는 미들웨어가 있어야 더욱 손쉽게 상태를 관리 할 수 있습니다. 우선, 미들웨어가 어떤 역할을 하는지, 그리고 어떻게 작동하는지 이해를 하면서 직접 미들웨어를 만들어보고, 다른 미들웨어들을 설치해서 사용하는 방법을 배워보겠습니다.

 

1-1. 미들웨어란?

미들웨어는, 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정합니다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하시면 되겠습니다.

리듀서가 액션을 처리하기전에, 미들웨어가 할 수있는 작업들은 여러가지가 있는데요. 단순히 전달받은 액션을 콘솔에 기록을 할 수도 있고, 전달받은 액션에 기반하여 액션을 아예 취소시켜버리거나, 다른 종류의 액션들을 추가적으로 디스패치 할 수도 있습니다.

redux에 추가한 configrueStore.js

import { createStore , combineReducers, applyMiddleware } from "redux"

import thunk from "redux-thunk"

import users from './modules/users'

const middlewares = [thunk];

const reducer = combineReducers({

users

});

let store = initialState =>

createStore(reducer, applyMiddleware(...middlewares));

export default store();

middlewars는 배열객체! 안에 thnuk를 넣어두고

applyMiddleware에 (...middlewares)라고 저장해두었다.

여기서 ...은 행렬을 풀어 놓은 값으로써

예를 들어

const a = [1,2,3,4,5]

console.log(...a)시에

행렬이 아닌 

1 2 3 4 5 와 같은 안의 내용이 출력됨 

reducer에 있는 combineReducers는 수많은 Reducer들을 결합할 것인가 보다.