我可以让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;

这种方式运行良好而没有错误,但我是新的反应,我不知道是否有与redux-saga和redux-thunk一起工作的问题....

有人可以帮帮我吗？

Answer 1

两者都没问题。Sagas只是背景检查器，对某些动作做出反应，而重击则让您拥有更多有趣的动作创建者。

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

这两个扩展都不会改变动作的执行方式。最终，动作仍然只是裸露的物体，例如没有打手或没有萨加斯。

Answer 2

是的，当然你可以用这种方式同时使用 redux-saga 和 redux-thunk，

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import thunk from 'redux-thunk'
import logger from 'redux-logger'

import rootSagas from './sagas'
import rootReducer from './reducers'

const saga = createSagaMiddleware()

const middleWares = [saga, thunk]

export const store = createStore(
 rootReducer,
 applyMiddleware(...middleWares)
)

saga.run(rootSagas)