2017-10-14 15 views
1

私はReduxの-佐賀で働いていたが、私は問題によ:Reduxの-AUTH-ラッパーはReduxの-サンクリダイレクトを行うために必要とするので、私は単に私の店でサンクを追加しました:Redux-Sagaと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; 

この方法はエラーなしでうまく動作しますが、私は反応が新しく、redux-sagaとredux-thunkが一緒に働くことに問題があるかどうかわかりません....

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

+0

心配なし、矛盾はありません。実際、 'redux-thunk'はアクションがリテラルオブジェクトではない関数である場合にのみ介入します。 redux-thunkとredux-sagaを組み合わせて使用​​する際に、矛盾があってはいけません。 –

答えて

0

両者に問題はありません。サガはちょっとしたアクションに反応するバックグラウンドチェッカーですが、サンクはもっと面白いアクションクリエイターがいます。

サンクは同期されたコードのように機能しますが、サガはバックグラウンドでその仕事を行います。

両方の拡張機能は、どのように動作しているかを変えません。アクションは、最終的には、w/oサンクやw/oサガのような裸のオブジェクトだけです。

関連する問題