Redux dev tools

2017年08月19日

相信有開發過redux的人一定都知道redux dev tool，因為production版本的SPA不小心將此打開了，研究了一下還挺有趣的，稍微做個記錄。

網路上dev tool有兩種版本

gaearon/redux-devtools
redux作者所寫，設定比較麻煩，我是沒有用過，現在好像也比較少人使用，時代的眼淚。

redux-devtools-extension
用chrome extension開發的就是這個套件，但其實這個套件很強大，可以用於native與server side redux。下面以這個作為介紹。

SET UP

最基本寫法

const store = createStore(
               reducer,
               compse(
                 applyMiddleware(),
                 window.__REDUX_DEVTOOLS_EXTENSION__ &&
                 window.__REDUX_DEVTOOLS_EXTENSION__()
               )
             );

於是有人這樣寫production

let middleware = applyMiddleware();
   if (process.env.NODE_ENV !== 'production') {
       middleware = compose(
         middleware,
         window.devToolsExtension &&
         window.devToolsExtension()
       );
   }

方便的寫法
使用redux-devtools-extension

import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(reducer,
              composeWithDevTools(
                applyMiddleware(...middleware),
              )
);

看起來沒有差很多，但是redux-devtools-extension還提供不同的情境使用，像是logOnly

dev extension提供了許多features，這些features預設是打開的，我很少用，如果不用建議關掉會提升效能，logOnly mode就是幫你把這些功能關閉而已，然後他又貼心的提供logOnlyInProduction mode。(判斷process.env.NODE_ENV ==='production')

import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction';

const composeEnhancers = composeWithDevTools({
  // options like actionSanitizer, stateSanitizer
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

當然也可以開developmentOnly mode，關於production mode是否要加入dev extension可以看這篇，寫的很棒，最後我是用了logOnlyInProduction，不過文中的website我去看似乎都抜掉了XD。

其中我還用了一個設定叫做stateSanitizer you_cant_see_me

可以將state中機敏性資訊隱閉，防範別人偷偷幹走，雖然在這個範例中一點用都沒，因為在state看不到，去dev tool的network觀察api連線就好了XDD，不過聊勝於無囉。

原本有想要把整份文件翻成中文的，但是實在太多也太忙了，有一些沒有實際使用也怕翻錯，有空再研究吧。

reactredux

展開Disqus

前端小誌(轉型中)

一個用來記錄人老會忘記的地方

Redux dev tools

SET UP