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

Question

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

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

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

1. 如果我分派(dispatch)函数或 promise 以外的任何东西，操作将直接转到 reducer。

2. 如果我派发一个函数，它会通过 thunk，如果我调用 next，它会通过 promise 中间件。

3. 如果我分派(dispatch)一个函数，它将通过 thunk，并且在该函数之外，如果我分派(dispatch)另一个函数，它将再次通过 thunk，或者如果我正在分派(dispatch)一个 promise，它将通过 promise 中间件。
4. 如果我在流量中间件中，调用 next 会将操作传递给 reducer，或者如果我调用了 dispatch 而操作既不是函数也不是 promise，它也会直接传递给 reducer。
5. 如果在 thunk、promise 中间件或 traffic 中间件中，我不使用 dispatch 或 next，则返回的对象被切断，循环就此停止，数据将不再经过任何中间件链，也不会到达 reducer 。

我的中间件.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

1. If I dispatch anything other a function, or promise, the action will go directly to the reducer.
2. 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.

这两点你是对的。

3. 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 在函数中注入(inject) dispatch ，它从链的开始再次启动进程。所以，如果你要派发一个函数，它将再次由 thunk 处理。

4. 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.

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

5. 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，链中的其他中间件将不会得到您的操作，也不会有任何影响。