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让你有更多有趣的动作创作者。

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

这两种扩展都不会改变动作如何飞来飞去。最后，行动仍然只是像w / o thunk或w / o 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)

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

2 个答案: