redux - 我可以让 Redux-Saga 和 Redux-Thunk 一起工作吗？

Question

我正在使用 redux-saga 但遇到了一个问题:redux-auth-wrapper 需要 redux-thunk进行重定向，所以我只是在我的商店中添加了 thunk:

import {createStore, compose, applyMiddleware} from 'redux';
import createLogger from 'redux-logger';
import {routerMiddleware} from 'react-router-redux';
import {browserHistory} from 'react-router';
import thunk from 'redux-thunk';
import createSagaMiddleware, {END} from 'redux-saga';
import sagas from '../sagas';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import rootReducer from '../reducers';
import _ from 'lodash';
import {loadState, saveState} from '../connectivity/localStorage';

const persistedState = loadState();

const routerMw = routerMiddleware(browserHistory);
const loggerMiddleware = createLogger();
const sagaMiddleware = createSagaMiddleware();

function configureStoreProd() {
  const middlewares = [
    // Add other middleware on this line...

    routerMw,
    sagaMiddleware,
    thunk    
  ];

  const store = createStore(rootReducer, persistedState, compose(
    applyMiddleware(...middlewares)
    )
  );

  store.subscribe(_.throttle(() => {
    saveState({
      auth: store.getState().auth
    });
  }, 1000));

  sagaMiddleware.run(sagas);
  store.close = () => store.dispatch(END);

  return store;
}

function configureStoreDev() {
  const middlewares = [
    // Add other middleware on this line...

    // Redux middleware that spits an error on you when you try to mutate your state either inside a dispatch or between dispatches.
    reduxImmutableStateInvariant(),

    routerMw,
    sagaMiddleware,
    loggerMiddleware,
    thunk
  ];

  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // add support for Redux dev tools
  const store = createStore(rootReducer, persistedState, composeEnhancers(
    applyMiddleware(...middlewares)
    )
  );

  store.subscribe(_.throttle(() => {
    saveState({
      auth: store.getState().auth
    });
  }, 1000));

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextReducer = require('../reducers').default; // eslint-disable-line global-require
      store.replaceReducer(nextReducer);
    });
  }

  sagaMiddleware.run(sagas);
  store.close = () => store.dispatch(END);

  return store;
}

const configureStore = process.env.NODE_ENV === 'production' ? configureStoreProd : configureStoreDev;

export default configureStore;

这种方式工作得很好，没有错误，但我是 react 新手，我不知道 redux-saga 和 redux-thunk 一起工作是否有问题...

有人可以帮助我吗？

Answer 1

两者兼得没有问题。 Sagas 只是对某些操作使用react的背景检查器，而 thunk 让您拥有更有趣的操作创建者。

虽然 thunk 的行为更像是同步代码，但 sagas 会在后台完成它的工作。

这两个扩展都不会改变操作的飞行方式。最终， Action 仍然只是裸露的对象，例如没有 thunk 或没有 sagas。