结合redux-thunk和redux-batched-actions的正确方法是什么?

时间:2018-07-18 16:12:20

标签: redux redux-thunk redux-batched-actions

redux-batched-actions插入现有Redux存储区的正确方法是什么?我对Redux中间件API完全感到困惑。

当前我正在使用redux-thunkredux-little-router

以下是创建我的Redux存储的代码源:

import { createStore, applyMiddleware, compose, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import { routerForBrowser } from 'redux-little-router'
import reducers from './store'
import routes from './routes'

const { reducer, middleware, enhancer } = routerForBrowser({ routes })

// Combine all reducers and instantiate the app-wide store instance
const allReducers = combineReducers({ ...reducers, router: reducer })

// Build middleware (if devTools is installed, connect to it)
const allEnhancers = (window.__REDUX_DEVTOOLS_EXTENSION__
  ? compose(
      enhancer,
      applyMiddleware(thunk, middleware),
      window.__REDUX_DEVTOOLS_EXTENSION__())
  : compose(
      enhancer,
      applyMiddleware(thunk, middleware)))

// Instantiate the app-wide store instance
const initialState = window.initialReduxState
const store = createStore(
  allReducers,
  initialState,
  allEnhancers
)

redux-batched-actions documentation有两种用法:enableBatchingbatchDispatchMiddleware。在我的情况下应该使用哪一个?

1 个答案:

答案 0 :(得分:0)

在我的探险队返回到神话般的redux,redux-thunk,redux-batched-actions等源代码之后,回答了我自己的问题。

正确的方法似乎是使用batchDispatchMiddleware,如下所示:

import { batchDispatchMiddleware } from 'redux-batched-actions'

// ...

const allEnhancers = (window.__REDUX_DEVTOOLS_EXTENSION__
  ? compose(
      enhancer,
      applyMiddleware(batchDispatchMiddleware, thunk, middleware),
      window.__REDUX_DEVTOOLS_EXTENSION__())
  : compose(
      enhancer,
      applyMiddleware(batchDispatchMiddleware, thunk, middleware)))

注意:不过,我不知道我是否可以派遣批量的thunk。我在当前的应用程序中不这样做。使用后果自负!