커스텀 미들웨어(Middleware) 사용하기

JavaScript/Redux 2022. 9. 16. 17:45

1. 미들웨어(Middleware) # const customMiddleware = (storeAPI) => (next) => (action) => { /* 해당 Reducer가 실행되기 전에 미들웨어에서 처리할 작업 */ return next(action); // 다음 미들웨어로 이동 } Redux에서 미들웨어는 Store의 dispatch, getState 메서드를 담고 있는 객체 storeAPI, 다음 미들웨어를 가리키는 next, Action 객체인 action을 차례차례로 argument로 받는 커링 함수 형태를 띄고 있음. 특정한 Action이 Dispatch 되고, 해당 Reducer가 실행되기 전 또는 후에 미들웨어가 실행됨. 1. 실행 시점: 해당 Reducer가 실행되기 전 또는 후 2..

Thunk Middleware의 작동 방식 살펴보기

JavaScript/Redux 2022. 8. 20. 20:13

import thunkMiddleware from 'redux-thunk' const middlewareEnhancer = applyMiddleware(thunkMiddleware); export default const store = createStore(rootReducer, middlewareEnhancer); Thunk 미들웨어(thunkMiddleware)는 위와 같이 Redux Store에 마운트할 수 있는데, 그 첫 과정으로 thunkMiddleware는 아래와 같은 함수에서 반환됨. 1. redux-thunk에서의 thunkMiddleware # // 'redux-thunk' index.js function createThunkMiddleware(extraArgument) { const m..

Article Thumbnail
Express.js 미들웨어

JavaScript/Node.js 2022. 6. 24. 19:51

1. 미들웨어(Middleware) 요청 및 응답 객체, 다음 미들웨어 함수에 대한 접근 권한을 갖는 함수. 클라이언트에서 요청이 오고 그 응답을 보내기까지 그 사이에서 실행되는 각각의 콜백함수를 의미함. POST 요청의 body를 얻어내고자 할 때, 모든 응답에 CORS 헤더를 붙여서 전송해야 할 때, 요청 헤더에 사용자 인증 정보가 담겨있는지 확인하는 등 요청을 처리하기 전에 필요한 사전 작업을 하고자 할 경우, 미들웨어를 이용하면 간단하게 구현할 수가 있음. (req, res, next) => { /* ... */ } 미들웨어는 HTTP Request 객체, Response 객체, 다음에 실행될 미들웨어를 가리키는 next 3개의 parameter를 가지는데 함수 블록 안에서 Request, Res..

Article Thumbnail