redux-devtools-extensionのdevToolsExtensionがdeprecatedになっていた

redux-devtools-extension

react/reduxを書いてる人だったらchromeに入れておいた方がいい拡張機能の１つ。

github.com

reduxのstateがこんな感じで追えるので便利。

airbnbの例。

devToolsExtension is deprecated

devToolsのExtensionを利用するには、reduxのcreateStoreにdevToolsをつなぎこむ。

createStore(
   reducer,
    /* preloadedState, */
   window.devToolsExtension
          ? window.devToolsExtension()
          : DevTools.instrument(),
);

ちょっとの間放置しておいたら、redux-devtoolsに何も表示されないようになってしまっていた。

以前は、window.devToolsExtension だったんだが、いつのまにか window.__REDUX_DEVTOOLS_EXTENSION__ になっていた。

githubにある通り、

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

でいける。

また、redux-devTools-dock-monitorと同時に利用したい場合は、window. __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ を利用する。

redux-detools-dock-monitor はブラウザにextensionが入ってなくてもredux-devtoolsを使えるようにするもの。

github.com

let enhancer;
if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
  enhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__(
    applyMiddleware(...middleware)
  );
} else {
  enhancer = compose(
    applyMiddleware(...middleware),
    DevTools.instrument(),
  );
}
store = createStore(
  reducer,
  initialState,
  enhancer
);

参考

github.com