網(wǎng)友評(píng)分: 9分
Redux DevTools是Chrome瀏覽器中的一款調(diào)試插件,它可以用于調(diào)試應(yīng)用程序的狀態(tài)更改,我們可以清晰的看到當(dāng)前store倉(cāng)庫(kù)中的state是怎么樣的,在可視化工具的左邊,我們還可以看到觸發(fā)的action的變化!
1、在使用Chrome Redux調(diào)試插件之前,我們需要做一些項(xiàng)目的基本配置。我們要安裝到項(xiàng)目的一些基本使用,如: react、redux、react-redux等?;究蚣苋缦?
import Redux from 'redux'
// 引入createStore創(chuàng)建store,引入applyMiddleware 來(lái)使用中間件
import {createStore, applyMiddleware} from 'redux'
// 引入所有的reducer
import storeReducer from '../Reducer/index.jsx'
export default createStore(storeReducer);
2、下載安裝redux-devtools。
3、要想使用chrome redux調(diào)試插件,還需要在項(xiàng)目中安裝 redux-devtools-extension 插件。其安裝方法如下:
即在項(xiàng)目中直接執(zhí)行下面的安裝命令:
npm install redux-devtools-extension --save-dev
4、安裝成功后,還需要redux-devtools在項(xiàng)目中的配置,實(shí)際上就是在創(chuàng)建store的時(shí)候把redux-devtools安裝即可。
import Redux from 'redux'
// 引入createStore創(chuàng)建store,引入applyMiddleware 來(lái)使用中間件
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( )
);
標(biāo)簽: chrome插件
關(guān)于本站|下載幫助|下載聲明|軟件發(fā)布|聯(lián)系我們
Copyright ? 2005-2024 virtualinsta360.com.All rights reserved.
浙ICP備06019006號(hào)-1 浙公網(wǎng)安備33038102330474號(hào)