react-redux开发者工具的使用 redux-dev-tools

chrome浏览器点击右上角自定义及控制的图标找到更多工具=》扩展程序,然后点击加载已解压的扩展程序,找到解压好的工具文件夹,选择文件夹即可。
react-redux开发者工具的使用 redux-dev-tools_第1张图片
然后安装redux-devtools-extension

npm add redux-devtools-extension或者yarn add redux-devtools-extension

在store中进行配置

/**该文件专门用于暴露一个store对象,整个应用只有一个store对象 */
//引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware,combineReducers} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './reducers/count'
import personReducer from './reducers/person'
//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
//引入redux-devtools-extension
import{composeWithDevTools} from 'redux-devtools-extension'

//汇总所有的reducer变为一个总的reducer
const allReducer=combineReducers({
    he:countReducer,
    rens:personReducer
})
//暴露store applyMiddleware(thunk)
export default createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))

安装完毕后运行项目即可看到浏览器右上角的redudx工具提示会变亮
react-redux开发者工具的使用 redux-dev-tools_第2张图片

你可能感兴趣的:(React,react,redux,redux-dev-tools,redux开发者工具)