redux - 如何使用 reduxThunk 应用 redux 开发者工具
问题描述
这是我的代码
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import "normalize.css/normalize.css"
import "./styles/styles.scss";
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import AppRouter from './routers/AppRouter';
import reducers from './reducers';
import {AUTH_USER} from "./actions/types";
//
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware(reducers);
const token = localStorage.getItem('token');
if(token){
store.dispatch({type:AUTH_USER});
}
ReactDOM.render(
<Provider store={store}>
<AppRouter />
</Provider>
, document.getElementById('app'));
所以我想使用来自 npm 的 redux-devtools-extension 包
我如何使用 createStoreWithMiddleware 实现
解决方案
composeWithDevTools
只需在第一次导入时用 .Like包装中间件:
import { composeWithDevTools } from 'redux-devtools-extension';
将所有中间件添加到一个数组中。现在只有一个。
const middleware = [
reduxThunk,
];
然后代替createStoreWithMiddleWare
做
const store = createStore(reducers, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));
所以代码变成了:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import "normalize.css/normalize.css"
import "./styles/styles.scss";
import { Router, Route, IndexRoute, browserHistory } from 'react-router';
import reduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import AppRouter from './routers/AppRouter';
import reducers from './reducers';
import {AUTH_USER} from "./actions/types";
const middleware = [
reduxThunk,
];
const store = createStore(reducers, composeWithDevTools(
applyMiddleware(...middleware),
// other store enhancers if any
));
const token = localStorage.getItem('token');
if(token){
store.dispatch({type:AUTH_USER});
}
ReactDOM.render(
<Provider store={store}>
<AppRouter />
</Provider>
, document.getElementById('app'));
尚未测试,但应该可以工作。
推荐阅读
- ios - 为什么 Data.append(_:) 不会在 Swift for iOS 中采用 Int 类型枚举的 rawValue?
- server - 计算引擎实例移动
- javascript - 基于路线的显示元素 - Angular
- android - 获取 div 类 JSOUP 下的链接
- sql - 从多个 .bak 文件还原数据库 SQL Server 2012
- ios - UIKit何时调用“draw”?
- javascript - Vue.js:在方法中的循环内更新 Bottstrap 进度条
- javascript - 删除具有重叠 png 按钮图像的按钮残留物
- python - 当我将代码粘贴到 python 终端中时如何取消激活双缩进
- swift - Swift 图表不显示值标签