React redux,操作被调度一次,但是调用了多个API

时间:2020-08-31 20:50:44

标签: reactjs redux react-redux

我在我的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};

0 个答案:

没有答案