react 项目如何安装并使用 Redux DevTools Extension

一、react项目安装并使用Redux DevTools Extension

  1. react 项目中,通过 npm install --save redux-devtools-extension 命令进行下载 redux-devtools-extension 工具, GitHub 地址为 https://github.com/zalmoxisus/redux-devtools-extension

  2. 在安装完成以后,就可以在 storeindex.js 文件中进行使用, reduxredux-thunk的结合,代码如下所示:

  • 第一种方式:
import { createStore, compose, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(reducer, composeEnhancers(
    applyMiddleware(thunk)
))

export default store
  • 第二种方式:
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import reducers from './reducers'

export default createStore(reducers, composeWithDevTools(applyMiddleware(thunk)))
  1. storeindex.js 文件中进行使用, reduxredux-saga 的结合,代码如下所示:
import { createStore, applyMiddleware, compose } from 'redux'
import reducer from './reducer'
import todoSagas from './sagas'
import createSagaMiddleware from 'redux-saga'

const sagaMiddleware = createSagaMiddleware()
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware))

const store = createStore(reducer, enhancer)
sagaMiddleware.run(todoSagas)

export default store

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读