Engineering_S/W & H/W

이 글을 작성하면서 express의 middleware와 기능적인 면에서 비슷하다는 것을 알았습니다. 아래 링크를 참고해 주시기 바랍니다. 링크 : node.js Express Middleware 사용법 Redux의 middleware장점 1. 커스텀 기능을 확장할수 있는 방법 2. dispatching와 action사이에 제 3자 extension 접점을 제공하고 reducer에 도달한다. 3.  logging, 에러 리포트 등등 middleware에 사용이 가능하다. 일단 이번 예제에서는 Logger를 middleware에 사용하겠다.  Redux에 사용할 logger npm 사이트 https://www.npmjs.com/package/redux-logger 위 사진처럼 redux-logger를 설치한다. // 로거를 생성하기 위한 require const reduxLogger = require ( 'redux-logger' ); const logger = reduxLogger . createLogger (); 이전에 사용한 코드 맨 위쪽에 가서 위 2줄을 추가해 준다. 이렇게 하면 logger의 설정은 마무리가 됬다. // middleware추가하기 const applyMiddleware = redux . applyMiddleware ; 이제 middleware를 추가하기 위해서 위 코드를 작성해 줍니다. // 1. app의 state를 갖고 있는다. (인자로 reducer) // createStore를 이용하여 storage를 생성 // 다른 reducer가 합쳐진 rootReducer를 인자로 갖습니다. // createStore의 두번째 인자로 middleware가 추가 됬고 middleware의 인자는 logger이다. const storage = createStore ( rootReducer , applyMiddleware ( logger )); 저번 글의 마지막에서 2개의 reducer를 combineRe...

 이제 새로운 직원을 뽑아서 전담하여 쿠키만 판매할려고 합니다. 그러기 위해서 새로운 직원(reducer)을 뽑아야 겠죠.  // Action const BUY_TOY = 'BUY_TOY' ; // type을 설정한다(문자열) const BUY_COOKIE = 'BUY_COOKIE' ; // type을 설정한다(문자열) function buyToy (){ // 고객이 장난감을 살때 return { type : BUY_TOY , info : 'First step of redux action' }; }; function buyCookie (){ // 고객이 쿠키를 살때 return { type : BUY_COOKIE , info : 'First step of redux action' }; }; 고객의 action은 장난감 또는 쿠키를 구매하는 것이기 때문에 이전 코드와 동일하게 작성합니다. // 초기 state상태(2개의 initial state) const initialToyState = { numOfToy : 10 , // 초기에 장난감이 10개 } const initialCookieState = { numOfCookie : 15 , // 초기에 쿠키는 15개 } 이제 이전 글에서는 1개의 initialState를 사용했지만 이번에는 분할하여 각각 initialToyState, initialCookieState로 나누어 줍니다. // 장난감 전담 직원(toyReducer) const toyReducer = ( state = initialToyState , action ) => { switch ( action . type ){ // action의 타입을 확인하여 case...