Redux-DevTools v2.17.0官方版

Redux-DevTools v2.17.0官方版

  • 版本: v2.17.0官方版
  • 分类:浏览器插件
  • 大小: 1.7M
  • 时间:2022-05-24
  • 软件介绍
  • 软件截图
介绍

Redux-DevTools是一款谷歌浏览器调试插件,用于调试应用程序的状态更改,提供redux-devtools离线安装crx文件,通过redux-devtools, 我们可以清晰的看到当前store仓库中的state是怎么样的,在可视化工具的左边,我们还可以看到触发的action的变化!

Redux-DevTools使用方法

  1、在使用Chrome Redux调试插件之前,我们需要做一些项目的基本配置。我们要安装到项目的一些基本使用,如: react、redux、react-redux等。基本框架如下:

  import Redux from 'redux'  // 引入createStore创建store,引入applyMiddleware 来使用中间件  import {createStore, applyMiddleware} from 'redux'  // 引入所有的reducer  import storeReducer from '../Reducer/index.jsx'  export default  createStore(storeReducer);  2、下载安装redux-devtools。  3、要想使用chrome redux调试插件,还需要在项目中安装 redux-devtools-extension 插件。其安装方法如下:  即在项目中直接执行下面的安装命令:  npm install redux-devtools-extension --save-dev  4、安装成功后,还需要redux-devtools在项目中的配置,实际上就是在创建store的时候把redux-devtools安装即可。  import Redux from 'redux'  // 引入createStore创建store,引入applyMiddleware 来使用中间件  import {createStore, applyMiddleware} from 'redux'  // 引入所有的reducer  import storeReducer from '../Reducer/index.jsx'  // 利用redux-logger打印日志  import {createLogger} from 'redux-logger'  // 安装redux-devtools-extension的可视化工具。  import { composeWithDevTools } from 'redux-devtools-extension'  // 使用日志打印方法, collapsed让action折叠,看着舒服。  const loggerMiddleware = createLogger({collapsed: true});  export default  createStore(  storeReducer,  composeWithDevTools(    )  );

展开
软件截图