Can I Have Redux-Saga and Redux-Thunk Working Together?

Question

I was working with redux-saga but I'm with a problem: the redux-auth-wrapper needs the redux-thunk to do the redirects, so I simply added the thunk in my store:

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;

This way works nice without errors, but I'm new in react and I don't know if have problem with redux-saga and redux-thunk working together...

Someone can help me?

Abednego

No worry, No conflict. Indeed, redux-thunk will intervenes only when the action is a function not a literal object. There shouldn't be any conflicts between using redux-thunk in conjunction with redux-saga. – Ese

Answer 1

No problems to have both. Sagas are just background checkers who react to some actions while thunk let's you have more interesting action creators.

While thunk will act more like synced code, sagas will do it's job in a background.

Both extensions do not change how actions are flying around. Actions still, in the end, are just bare objects like w/o thunk or w/o sagas.

Misprision

Answer 2

Yes, of course you can use both redux-saga and redux-thunk in this way,

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)

Interpellate