16-Redux DevTools的使用

Time: 20200129

本文主要讲redux devtools的使用。
首先浏览器需要安装这个插件，然后项目中要安装库，并写代码应用这个库。

安装

项目中安装：
yarn add redux-devtools-extension

使用

截屏2020-01-29下午11.13.49.png

代码实例

store.js

import { createStore, applyMiddleware } from 'redux'
import { rootReducer } from './rootReducer'
import logger from 'redux-logger'
import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(rootReducer, 
    composeWithDevTools( applyMiddleware(logger)
    )
 )

export default store

然后在前端，打开浏览器终端，选择Redux，可以看到面板：

截屏2020-01-29下午11.20.14.png

比较好玩的是这个Dispatcher，我们可以在这里手动dispatch动作，界面也会响应。

点击播放按钮，可以看到历史操作，界面也会有响应。

这是很好很好的debug工具。

END.