如何在React项目中使用Redux DevTools Extension开发者工具？

本文共计309个文字，预计阅读时间需要2分钟。

1. 谷歌商店安装插件需访问外网下载，也可自行搜索资源。

2.项目中添加redux-devtools-extension库，终端运行cn+1. 谷歌商店安装插件+需访问外网下载+也可自行搜索资源

1.谷歌安装插件需要访问外网在谷歌商店中下载也可以自己格外找资源2.项目中添加redux-devtools-extension库在终端运行cn 1.谷歌安装插件

需要访问外网在谷歌商店中下载也可以自己格外找资源

2.项目中添加redux-devtools-extension库

在终端运行cnpm add redux-devtools-extension即可

3.在store.js文件中添加redux-devtools-extension库中的内容

//该文件专门用于暴露一个store对象整个应用只有一个store//引入createStoreimport { createStore,applyMiddleware,combineReducers } from "redux";//引入为组件服务的reducerimport countReducer from "./reducer/count";import personReducer from "./reducer/person" //引入redux-thunk用于支持异步actionimport thunk from redux-thunk//引入redux-devtools-extensionimport {composeWithDevTools} from redux-devtools-extension//汇总所有的renducer变成一个总的reducerconst allReducer combineReducers({count:countReducer,persons:personReducer})//暴露storeexport default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)));

从redux-devtools-extension中引入composeWithDevTools

将composeWithDevTools是一个函数将其作为createStore的第二个参数传进去即可。

如果需要用到applyMiddleware(thunk)applyMiddleware(thunk)可作为composeWithDevTools的参数传给store。

4.开发者工具作用

可以查看store中存储的状态。

可以操作reducer运行的action对象。

可以自己添加action进行dispatch查看效果。