[Redux] devtool option (blacklist, sanitizer)

리덕스 데브툴에서 특정액션이나 상태를 변환해서 보여줄수도 있고 보여주지 않도록 설정할수 있다.

로드유무만 확인이후 해당객체를 사용만 하지 새롭게 저장하는 대상이 아닌경우 사용 할수있음

• actionSanitizer (function) - function which takes action object and id number as arguments, and should return action object back. See the example bellow.
• stateSanitizer (function) - function which takes state object and index as arguments, and should return state object back.

const actionSanitizer = (action) =>
  action.type === 'SET_SECRET_ACTION' ? { ...action, payload: '<<LONG_BLOB>>' } : action;

const stateSanitizer = (state) => 
  state.secretStroe.secret ? { ...state, secretStore: { secret: '<<LONG_BLOB>>' } } : state;
};

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  actionSanitizer,
  stateSanitizer,
})
const store = createStore(rootReducer, composeEnhancers(applyMiddleware(...middleware));

위와 같이 특정 액션 이나 상태를 데브툴에서 다르게(임의의 형태로) 보여주도록 설정할수 있다.

 

주식같은 짧은시간에 반복해서 소켓으로 데이터를 받는 경우 해당 데이터를 저장하는 액션이 계속 일어나면 디버깅할때 불편할수 있어서 

이런경우에는 블랙리스트를 추가해줄수도 있다.

const actionsBlacklist = ['SOME_ACTION', 'SOME_OTHER_ACTION']

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  actionSanitizer,
  stateSanitizer,
  actionsBlacklist,
})

그러면 실제 동작은 하지만 데브툴상에서 는 해당액션은 안보인다.

 

 

 

https://github.com/zalmoxisus/redux-devtools-extension/blob/HEAD/docs/API/Arguments.md

GitHub - zalmoxisus/redux-devtools-extension: Redux DevTools extension.