Я видел некоторый код промежуточного программного обеспечения 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