我在我的react项目中使用了redux,并且在过去的几个小时中我有些卡住了。当我从某个组件调度一个动作时,有时会按其预期的方式工作,并且只进行一个API调用,但是有时会进行多个API调用(最多5-6次),这非常令人沮丧,因为它并非每次都发生,但是有时。我在创建商店时也使用过batchedSubscribe
。这就是我创建商店的方式。
import {applyMiddleware, compose, createStore} from 'redux';
import reducers from '../reducers/index';
import {createBrowserHistory} from 'history'
import {routerMiddleware} from 'connected-react-router';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas/index';
import { batchedSubscribe } from "redux-batched-subscribe";
import { debounce } from "lodash";
const history = createBrowserHistory();
const routeMiddleware = routerMiddleware(history);
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, routeMiddleware];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export default function configureStore(initialState) {
const store = createStore(reducers(history), initialState,
composeEnhancers(applyMiddleware(...middlewares),batchedSubscribe(debounce(notify => {notify();}))));
sagaMiddleware.run(rootSaga);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers/index', () => {
const nextRootReducer = require('../reducers/index');
store.replaceReducer(nextRootReducer);
});
}
return store;
}
export {history};