Redux - 在中间件中调用 storeAPI.disapatch(action) 会导致“递归过多"

本文介绍了Redux - 在中间件中调用 storeAPI.disapatch(action) 会导致“递归过多"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在学习 Redux 基础教程.在 '编写自定义中间件'，我们了解到中间件被编写为一系列三个嵌套函数，如下所示:

I'm working through the Redux fundamentals tutorial. In the section on 'Writing Custom Middleware', we learn that middleware are written as a series of three nested functions like so:

// Outer function:
function exampleMiddleware(storeAPI) {
  return function wrapDispatch(next) {
    return function handleAction(action) {
      // Do anything here: pass the action onwards with next(action),
      // or restart the pipeline with storeAPI.dispatch(action)
      // Can also use storeAPI.getState() here

      return next(action)
    }
  }
}

exampleMiddleware 解释如下:

exampleMiddleware:外部函数实际上是中间件"本身.它会被 applyMiddleware 调用，并且 接收一个 storeAPI包含商店的 {dispatch, getState} 函数的对象.这些实际上是相同的 dispatch 和 getState 函数商店.如果你调用这个 dispatch 函数，它会发送 action到中间件管道的开始.这仅被调用一次.

我不明白倒数第二句话是什么意思(如果你调用这个dispatch函数，它会将动作发送到中间件管道的开头)，所以我尝试调用store.dispatch(action) 位于示例应用程序的 src/exampleAddons/middleware.js 中提供的中间件之一中，以查看会发生什么并递归过多".这是演示.

I didn't understand what was meant by the second last sentence (If you call this dispatch function, it will send the action to the start of the middleware pipeline), so I tried calling store.dispatch(action) inside one of the middlewares provided in src/exampleAddons/middleware.js of the example app to see what happens and got "too much recursion". Here's the demo.

所以storeAPI.dispatch()是所有中间件组合起来的composed调度函数，而不是原来store的dispatch，这就解释了递归.但是storeAPI.dispatch()有什么用?我是否使用不当?

So storeAPI.dispatch() is the composed dispatch function of all the middlewares combined rather than the original store's dispatch, which would explain the recursion. But then what is the use of storeAPI.dispatch()? Am I using it incorrectly?

在 applyMiddleware 的来源:

function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    // ...1) createStore is called and the resulting store is saved as `store`
    const store = createStore(...args)
    
    // ...2) a `dispatch` variable is defined and assigned some function
    let dispatch = () => {
      throw new Error(
        'Dispatching while constructing your middleware is not allowed. ' +
          'Other middleware would not be applied to this dispatch.'
      )
    }
    
    // ...3) a middlewareAPI object is defined containing the store's getState method and the `dispatch` function from 2).
    const middlewareAPI = {
      getState: store.getState,
      dispatch: (...args) => dispatch(...args)
    }
    
    // ...4) the middlewares passed to applyMiddleware are called with the `middlewareAPI` object from 3) and the resulting functions are saved in array `chain`.
    const chain = middlewares.map(middleware => middleware(middlewareAPI))
    
    // ...5) the middlewares are composed and the resulting "composed" middleware function is called with `store.dispatch`. 
    // This returns a composed dispatch function that chains together the `handleAction` functions of all the middlewares passed to applyMiddleware. 
    // This composed dispatch gets assigned to the `dispatch` variable from 2). 
    // Since the `storeAPI.dispatch` is referencing this variable, calling `storeAPI.dispatch` now calls the composed middleware function, which causes the infinite loop. 
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

无限循环似乎是上面注释中第5步重新赋值的结果.但我不确定我的推理是否正确，或者我是否正确使用了 storeAPI.dispatch.我很感激社区可以在这里提供的任何指导，因为我找不到任何调用 storeAPI.dispatch() 的中间件示例.

The infinite loop seems to be the result of the re-assignment at step 5 in the annotations above. But I'm not sure if my reasoning is correct or if I'm even using storeAPI.dispatch correctly. I would appreciate any guidance the community could provide here as I wasn't able to find any examples of middleware that call storeAPI.dispatch().

the

Redux - 在中间件中调用 storeAPI.disapatch(action) 会导致“递归过多"

问题描述

推荐答案