React Redux: зачем вызывать next (action) в начале промежуточного программного обеспечения? - PullRequest
0 голосов
/ 16 апреля 2020

Я видел некоторый код промежуточного программного обеспечения React redux отсюда: https://www.metaltoad.com/blog/overview-redux-middleware-react-applications

Мне просто интересно ... следующее (действие) вызывается либо в начале функции, а затем switch(action.type) {...}, или внутри какого-либо переключателя регистра, как в примере ниже в middleware/api.js:

Может кто-нибудь сказать мне, что происходит, когда выполняется следующее (действие)? это действие уже отправляется в хранилище с помощью функции next (action), или что именно означает «действие распространяется на следующее промежуточное ПО в цепочке»? потому что в этой функции регистратор регистрирует новое состояние после следующего (Действие):

function logger({ getState }) {
  return next => action => {
    console.log('will dispatch', action)

    // Call the next dispatch method in the middleware chain.
    const returnValue = next(action)

    console.log('state after dispatch', getState())

    // This will likely be the action itself, unless
    // a middleware further in chain changed it.
    return returnValue
  }
}

, но что сбивает с толку, так это то, что значение состояния, по-видимому, уже изменилось, а в последней строке оно делает return returnValue я полагаю, что является исходным действием?

Мне просто интересно, что именно делается, и происходит ли оно синхронно или параллельно, например, когда я использую следующее (действие) в начале, что там происходит? Поскольку позже в коде я выполняю вызовы next({...}) или store.dispatch({...}) в операторе переключения регистра, отправляется ли это другое независимое действие, которое выполняется параллельно следующему (действие)? И, следовательно, могут ли побочные эффекты произойти? например, когда оператор switch case изменяет или отправляет действие, а в конце цепочки само действие отправляет другое подобное действие? Я в замешательстве ....

middleware / api. js:

const apiMiddleware = (store) => (next) => (action) => {
  switch(action.type) {
    // only catch a specific action
    case 'FETCH_MOVIE_DATA':
      // continue propagating the action through redux
      // this is our only call to next in this middleware
      next(action)

      // fetch data from an API that may take a while to respond
      MyMovieApi.get('/movies')
  .then(res => {
    // successfully received data, dispatch a new action with our data
    store.dispatch({
      type: 'SET_MOVIE_DATA',
      payload: { movies: res.data },
    })
  })
  .catch(err => {
    // received an error from the API, dispatch a new action with an error
    store.dispatch({
      type: 'SET_MOVIE_DATA_ERROR',
            payload: { error: err },
    })
  })
      break

    // if we don't need to handle this action, we still need to pass it along
    default: next(action)
  }
}

export default apiMiddleware
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...