redux-form（V7.4.2）筆記（二）

本文在上一篇（https://blog.51cto.com/zhuxianzhong/2144064）的基礎(chǔ)上重點(diǎn)關(guān)注redux-devtools-extension這款調(diào)試工具的使用。
    另外，撰寫(xiě)本文的原因其一是，redux-form庫(kù)官方提供的一系列示例中，在創(chuàng)建store時(shí)（即在store.js）中都使用了如下創(chuàng)建方式：

        const reducer = combineReducers({
  form: reduxFormReducer, // mounted under "form"
});
const store = (window.devToolsExtension
  ? window.devToolsExtension()(createStore)
  : createStore)(reducer);

export default store;

    為什么在一般的redux教程中都使用如下寫(xiě)法：
    const store=createStore(rootReducer);
    而上面卻使用另外一種形式？window何以有devToolsExtension這個(gè)屬性？

基于這些原因，在我打算總結(jié)的這個(gè)系列短文中干脆也順便分析一個(gè)這個(gè)問(wèn)題。

說(shuō)明

在閱讀本文前，請(qǐng)注意區(qū)別兩個(gè)不同的框架：redux-devtools和redux-devtools-extension。

其中，redux-devtools（https://www.npmjs.com/package/redux-devtools）使用了侵入式技術(shù)，是你的集成開(kāi)發(fā)環(huán)境下開(kāi)發(fā)React-Redux應(yīng)用的一個(gè)強(qiáng)大的開(kāi)發(fā)工具。這個(gè)東西能夠使用monitor技術(shù)實(shí)時(shí)監(jiān)聽(tīng)您的Store中的數(shù)據(jù)情況。在應(yīng)用前，需要專門(mén)安裝此模塊。

不過(guò)，如果你不想安裝上述模塊從而不致于其侵入你的項(xiàng)目之中，那么，Redux DevTools Extension是一個(gè)很好的替代選擇。這是一個(gè)瀏覽器插件，它支持Chrome，F(xiàn)irefox以及360瀏覽器等，它提供了大部分常用的監(jiān)聽(tīng)器用于配置你的項(xiàng)目，不需要安裝任何模塊（其實(shí)其提供了安裝選項(xiàng)），配置也很簡(jiǎn)單。

本文專注于介紹redux-devtools-extension。

【注意】當(dāng)前版本中（Version 2.7+)，window.devToolsExtension被重命名為window.REDUX_DEVTOOLS_EXTENSION
或
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
。
也就是說(shuō)，上面redux-form官方提供的代碼中都使用了較早版本的redux-devtools-extension。
但是，在以后的React-Redux項(xiàng)目中不再建議使用window.devToolsExtension方式了。

安裝redux-devtools-extension

有關(guān)安裝redux-devtools-extension插件，針對(duì)不同的瀏覽器，官方提供了多種安裝方案（https://github.com/zalmoxisus/redux-devtools-extension）。

由于我使用的是Google Chrome瀏覽器，所以選擇從Chrome網(wǎng)上應(yīng)用店中安裝插件的方式，商店地址是：https://chrome.google.com/webstore/category/extensions。進(jìn)入后，在左上角的搜索框內(nèi)輸入redux-devtools-extension后便可很容易地搜索到此插件。

在Redux應(yīng)用中的最基本的使用方式如下面代碼所示：

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

在此，第二個(gè)參數(shù)preloadedState是可選的，用于設(shè)置 state 初始狀態(tài)，一般是省略掉的。第三個(gè)參數(shù)以增強(qiáng)器(enhancer），也稱為第三方中間件（這種稱呼更合適一些吧），的方式出現(xiàn)。注意，這種書(shū)寫(xiě)要求Redux版本在3.1.0或者以上才行。

有關(guān)此插件的更復(fù)雜的應(yīng)用形式，還是請(qǐng)參考文后提供的官方網(wǎng)址吧。

瀏覽器中簡(jiǎn)單調(diào)試應(yīng)用

在webstorm中通過(guò)內(nèi)置終端Terminal運(yùn)行npm start啟動(dòng)redux-form第一個(gè)示例應(yīng)用。啟動(dòng)后，切換到Google Chrome瀏覽器并打開(kāi)右上角的插件圖標(biāo)，然后在左邊的表單中操作，并觀察在隨后彈出的右邊調(diào)試窗中的信息，請(qǐng)參考下圖：

因?yàn)槭浅醪絿L試使用，所以沒(méi)有對(duì)于這個(gè)調(diào)試窗口中信息作全面分析，請(qǐng)?jiān)?。但是，從上圖可以推知，這種針對(duì)store中信息的變化（隨著表單中的不斷操作）的調(diào)試是非常有親和力的。這從github上至今高達(dá)6783星（對(duì)于像React這種頗具挑戰(zhàn)性的技術(shù)棧選擇者來(lái)說(shuō)，這已經(jīng)是一個(gè)相當(dāng)高的星數(shù)了）的關(guān)注度也充分認(rèn)證了這一點(diǎn)。

參考資料

1.https://www.npmjs.com/package/redux-devtools
2.https://blog.csdn.net/achenyuan/article/details/80884895
3.https://github.com/zalmoxisus/redux-devtools-extension