Отправка действия из промежуточного программного обеспечения приводит к странному поведению - PullRequest
3 голосов
/ 17 июня 2020

Redux newb ie здесь. Я понимаю основную концепцию действий, промежуточного программного обеспечения и редукторов, но один из фрагментов кода работает не так, как я ожидал. Я не думаю, что это ошибка, но я хочу знать, почему все произошло именно так.

Итак, вот код:

const middlewareOne = store => next => action => {
        console.log('Middleware one recived action', action.type)
        switch (action.type) {
          case 'A':
            return next({ type: 'B' })
          default:
            return next(action)
        }
      }

      const middlewareTwo = store => next => action => {
        console.log('Middleware two recived action', action.type)
        switch (action.type) {
            case 'B':
                store.dispatch({ type: 'D' })
                return next({ type: 'C' })
            default:
                return next(action)
        }
      }

      function reducer(state, action)
        console.log('Reducer received action', action.type)
            return state
      }

У меня есть действия A, B, C и D, два промежуточного программного обеспечения и редуктор. Первое промежуточное ПО получает действие A и производит действие B, вызывая функцию next ().

Второе промежуточное ПО получает действие B и производит действие C и отправляет действие D.

Насколько я понимаю, в отправке действий из промежуточного ПО нет ничего плохого, но результат был очень удивительно для меня.

Вот консольный вывод для этого кода

Middleware one receive action A 
Middleware two receive action B 
Middleware one receive action D 
Middleware two receive action D 
Reducer received action D 
Reducer received action C

Итак, что я исключил: как я знаю, функция next () передает действие следующему промежуточному программному обеспечению или редуктор, если в цепочке нет промежуточного программного обеспечения, но диспетчеризация помещает действие в начало конвейера (все промежуточное ПО и, наконец, редуктор). Итак, имея в виду эту идею, я думаю, что действие C будет сначала сокращено (поскольку оно уже находится в конвейере промежуточного программного обеспечения), и только после этого промежуточное программное обеспечение начинает обрабатывать действие D, но результат полностью противоположен. Не могли бы вы объяснить мне, почему это происходит?

С уважением, Виталий Сулимов.

1 Ответ

1 голос
/ 29 июня 2020

Я тоже относительно новичок в redux, насколько я понимаю, эти вызовы не являются асинхронными c, поэтому они выполняются по порядку. Сначала вы отправляете D, чтобы go прошел через всю цепочку промежуточного программного обеспечения и редукторов до того, как произойдет вызов Next.

, поэтому ваш return next ({type: 'C'}) вызов произойдет только после завершения обработки store.dispatch ({type: 'D'})

...