web-dev-qa-db-ja.com

Redux-SagaとRedux-Thunkを一緒に動作させることはできますか？

私はredux-sagaで作業していましたが、問題があります。redux-auth-wrapperはリダイレクトを行うためにredux-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の連携に問題があるかどうかわかりません。

誰かが私を助けることができますか？

reduxredux-thunkredux-saga
17
bugalaws

両方持っていても問題ありません。 Sagasは、いくつかのアクションに反応する単なるバックグラウンドチェッカーですが、サンクを使用すると、より興味深いアクションクリエーターを作成できます。

サンクは同期されたコードのように機能しますが、sagasはバックグラウンドでその役割を果たします。

どちらの拡張機能も、アクションの飛び回る方法を変更しません。結局のところ、アクションは、サンクなしやサガなしのような裸のオブジェクトにすぎません。

11
Lukas Liesis

はい、もちろん、このように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)
4
Mahesh Joshi