dispatch、next 和中间件的排序在 react redux 中是如何工作的？

Question

我正在学习中间件，想确认一些事情。如果我有以下中间件设置：

dispatch -> thunk -> promise 中间件 -> 流量中间件 -> reducer

我想澄清一些其他事情。如果我对以下内容的理解不正确，请告诉我：

如果我分派函数或 promise 以外的任何东西，动作将直接转到 reducer。
如果我派发一个函数，它会通过thunk，而在那个函数之外，如果我调用next，它会通过promise中间件。
如果我分派一个函数，它将通过 thunk，并且在该函数之外，如果我分派另一个函数，它将再次通过 thunk，或者如果我正在分派一个 promise，它将通过 promise 中间件.
如果我在流量中间件中，调用 next 会将 action 带到 reducer，或者如果我调用 dispatch 而 action 既不是函数也不是 promise，它也会直接转到 reducer。
如果在thunk、promise中间件、traffic中间件中，我不使用dispatch或者next，那么返回的对象被切断，循环就此停止，数据将不再经过任何中间件链，也不到减速机。

我的middlewares.js

import * as actions from '../actions/actionCreators'
import { formatPokemonData, formatDescription, formatPokeType } from '../helpers/helpers'
import fetch from 'isomorphic-fetch'

export const promiseErrorMiddleware = store => next => action => {
  if (!action.promise) {
    return next(action)
  }
  const url = action.url
  const fetchName = action.fetchName
  return Promise.resolve(fetch(url)).then((response) => {
    if (response.status === 404) {
      store.dispatch({type: 'SPELLING_ERROR'})
      throw new Error("Please ensure Pokemon name is spelled correctly")
    } else if (response.status >= 400) {
      store.dispatch({type: 'SERVER_ERROR'})
      throw new Error("Server Error")
    }
    return response.json()
  }).then((data) => {
    next({data: data, needDirection: true, fetchName: fetchName })
  })
}

export const dataTrafficMiddleware = store => next => action => {
  if (!action.needDirection) {
    return next(action)
  }
  const data = action.data
  const fetchName = action.fetchName
  if (fetchName === 'fetchPokemon') {
    next(actions.receivePokemon(formatPokemonData(data)))
    store.dispatch(actions.fetchPokemonDescription(data.name))
  } else if (fetchName === 'fetchPokemonDescription') {
    store.dispatch(actions.receivePokemonDescription(formatDescription(data)))
    store.dispatch(actions.addActivePokemon(store.getState().pokemonArray.filter((p) => (
      p.name === data.name
    ))[0]))
    store.dispatch(actions.checkPokeTypeCache(store.getState().activePokemon.pokeType))
  } else if (fetchName === 'mainTypeFetch') {
    store.dispatch(actions.receivePokeType(formatPokeType(data)))
    store.dispatch(actions.addActivePokeType(formatPokeType(data)))
  } else if (fetchName === 'subTypeFetch') {
    store.dispatch(actions.receivePokeType(formatPokeType(data)))
    store.dispatch(actions.addActiveSubPokeType(formatPokeType(data)))
  }
}

Answer 1

If I dispatch anything other a function, or promise, the action will go directly to the reducer.

If I dispatch a function, it will go through thunk, and out of that function, if I call next, it will go through the promise middleware.

这两点你是对的

If I dispatch a function, it will go through thunk, and out of that function, if I dispatch another function, it will go through thunk again

redux-thunk 在函数中注入 dispatch ，它从链的开头再次启动进程。所以，如果你要派发一个函数，它将再次由 thunk 处理。

If I'm in the traffic middleware, calling next would take the action to the reducer, or if I called dispatch and the action is neither a function nor promise, it will also go directly to the reducer.

很难回答你的问题，因为我不知道你的流量中间件实现

If in thunk, promise middleware, or traffic middleware, I don't use dispatch or next, then the returned object is cut off and the cycle stops there and data will no longer go through any of the middleware chain nor to the reducer.

是的，如果你不调用next，链中的其他中间件将不会得到你的操作，并且不会有任何效果。

dispatch、next 和中间件的排序在 react redux 中是如何工作的？

how does dispatch, next, and the ordering of middleware work in react redux?

javascript

middleware

redux

react-redux