이 글을 작성하면서 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를 combineReducers를 이용하여 하나의 rootReducer를 만들었다. 이제 createStore의 두번째 인자로 middleware를 추가 하면 dispatch할때마다 middleware을 거쳐서 동작하게 된다.
// 4. method subscribe(listener)를 통해 listeners를 등록한다. (state가 변경시 app에 반영)
// state가 업데이트 될때마다 console.log에의해 업데이트 상태 storage.getState()에 의해 출력된다.
const unsubscribe = storage.subscribe(() => {
/*console.log('업데이트 상태', storage.getState())*/
});
다만 middleware를 사용하기 전에 쓰던 console.log를 주석처리해 주시기 바랍니다. 그렇지 않으면 terminal창에 이중으로 출력이 됩니다.
terminal에 출력된 것을 확인하면 위와 같이 나오는 것을 알수 있습니다. 이전에 출력된 console.log와 비슷하지만 내용면에서 훨씬 다양합니다.
간단히 logger를 확인하면 action의 종류(action), 이전 상태(pre state), 다음 상태(next state)등을 확인할수 있습니다.
이전글 : Redux - 여러명의 직원(reducer)
다음글 : Redux - axios,fetch을 통한 action
위 관련 코드는 아래를 참고 부탁드립니다.
const redux = require('redux')
const createStore = redux.createStore;
const combineReducer = redux.combineReducers; // 여러개의 reducer를 합치기 위한 method
// 로거를 생성하기 위한 require
const reduxLogger = require('redux-logger');
const logger = reduxLogger.createLogger();
// middleware추가하기
const applyMiddleware = redux.applyMiddleware;
// 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'
};
};
// Reducer
// (previousState, action) => newState
// 초기 state상태
const initialState = {
numOfToy: 10, // 초기에 장난감이 10개
numOfCookie : 15
}
const reducer = (state = initialState, action) => {
switch(action.type){ // action의 타입을 확인하여 case를 실행
case BUY_TOY: return { // 장난감을 구매하는 action
...state, // 이전 단계의 state를 복사한다.
numOfToy : state.numOfToy -1 // numOfToy만 이전 state에서 1 감소
};
case BUY_COOKIE: return { // 쿠키를 구매하는 action
...state, // 이전 단계의 state를 복사한다.
numOfCookie : state.numOfCookie -1 // numOfCookie만 이전 state에서 1 감소
};
default : return state; // 어느 case에도 속하지 않으면 그대로 state 출력
}
}
// 1. app의 state를 갖고 있는다. (인자로 reducer)
// createStore를 이용하여 storage를 생성
// createStore의 두번째 인자로 middleware가 추가 됬고 middleware의 인자는 logger이다.
const storage = createStore(reducer, applyMiddleware(logger));
// 2. method getState()를 통해서 state에 접근할수 있도록 한다.
console.log('초기상태', storage.getState());
// 4. method subscribe(listener)를 통해 listeners를 등록한다. (state가 변경시 app에 반영)
// state가 업데이트 될때마다 console.log에의해 업데이트 상태 storage.getState()에 의해 출력된다.
const unsubscribe = storage.subscribe(() => {
/*console.log('업데이트 상태', storage.getState()*/
});
// 3. method dispatch(action)를 통해서 state를 updated할수 있도록 한다.
// dispatch을 통해 action을 취할때 reducer는 action.type가 BUY_TOY라는 것을 알수 있습니다.
storage.dispatch(buyToy());
storage.dispatch(buyToy());
storage.dispatch(buyToy());
storage.dispatch(buyCookie());
storage.dispatch(buyCookie());
// 5. 등록되지 않은 listeners 해제
unsubscribe();
storage.dispatch(buyToy()); // 실행이 안됨
storage.dispatch(buyCookie()); // 실행이 안됨
댓글
댓글 쓰기