Как «следующее» работает в промежуточном программном обеспечении реагировать на избыточность?

Question

Я новичок в React и Redux. У меня есть простое приложение, где вы можете добавить входной текст в неупорядоченный список. У меня есть промежуточное ПО, которое не позволяет отображать определенные слова c. Я не понимаю порядок операций, которые реализуют промежуточное программное обеспечение. Из того, что я понимаю, когда я запускаю отправку, происходит что-то вроде:

1. Запуск отправления из события отправки формы

// title is an object with a string
function handleSubmit(event) {
    props.addArticle(title);
}

Go через функцию промежуточного программного обеспечения:

// store.js
const store = createStore(
  rootReducer, // this is defined elsewhere and effectively handles actions
  applyMiddleware(forbiddenWordsMiddleware)
);

// middleware.js
import { ADD_ARTICLE } from "../constants/constants.js";
const forbiddenWords = ["spam", "money"];
export function forbiddenWordsMiddleware({ dispatch }) {
    return function (next) {
        return function (action) {
            if (action.type === ADD_ARTICLE) {
                const foundWord = forbiddenWords.filter((word) =>
                    action.payload.title.includes(word)
                );
                if (foundWord.length) {
                    return dispatch({ type: "FOUND_BAD_WORD" });
                }
            }
            return next(action);
        };
    };
}

Как вышеприведенная функция на самом деле работает с createStore и applyMiddleware? Особенно меня смущает линия next(action). Откуда же дальше и откуда приходит действие? У меня проблемы с визуализацией линейного выполнения от отправки формы до проверки запрещенных слов.

Answer 1

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

Когда вы предоставляете свое промежуточное ПО функция applyMiddleware сначала вызывает каждое промежуточное ПО и передает ему что-то, называемое middlewareAPI здесь . Затем начинается с последнего промежуточного программного обеспечения, вызывает его и дает ему store.dispatch, а затем отправляет результат этого промежуточного программного обеспечения, которое предшествует последнему. И так продолжается (передавая результат последнего промежуточного программного обеспечения промежуточному программному обеспечению, которое предшествует ему) вплоть до первого промежуточного программного обеспечения.

Итак, допустим, у вас есть эти три промежуточных программного обеспечения: [a, b, c] и вы передаете все из них к функции applyMiddleware. вот что происходит:

1. Во-первых, каждое промежуточное ПО вызывается с объектом middlewareAPI, который в основном является объектом, содержащим исходные store.dispatch и store.getState.

   const middlewareAPI = { getState: store.getState, dispatch: store.dispatch }
   const aInChain = a(middlewareAPI);
   const bInChain = b(middlewareAPI);
   const cInChain = c(middlewareAPI);
   

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

   const finalC = cInChain(store.dispatch);
   const finalB = bInChain(finalC);
   const finalA = aInChain(finalB);
   

3. Затем мы устанавливаем окончательную версию первого промежуточного ПО в качестве отправки нового улучшенного магазина. Так, например, когда вы вызываете store.dispatch({ type: "Hello" }), вызывается функция finalA, и если она вызывает функцию finalB, которая предоставляется ей как next, то следующее промежуточное ПО в цепочке вызывается с любым действием finalA дает ему. И так для всей цепочки.

Итак, в примере, который мы имеем в вопросе, в промежуточном программном обеспечении есть два оператора возврата. Первый - return dispatch({...}), а второй - return next({...}).

В обоих из них наше промежуточное программное обеспечение говорит, что оно завершило свою работу с этим действием и позволяет продолжить цепочку отправки; Но в первом операторе return промежуточное программное обеспечение напрямую вызывает исходный dispatch и передает новое действие с новым типом в dispatch. Таким образом, действие, которое изначально было передано нашему промежуточному программному обеспечению, будет полностью забыто. Этот оператор разрывает цепочку промежуточного программного обеспечения до того, как действие достигает хранилища, и запускает новую отправку с новым действием.

Во втором возврате наше промежуточное программное обеспечение вызывает функцию next, которая, как я описал до этого - следующее промежуточное ПО в ряду, и наше промежуточное ПО отправляет ему исходное action без каких-либо изменений. Таким образом, результат будет таким, как если бы это промежуточное программное обеспечение вообще не существовало.

В этом сценарии наше промежуточное программное обеспечение просто говорит: «Мне все равно, что это за действие; я хочу отправить его через следующее промежуточное программное обеспечение, чтобы решить, должно ли оно достигнуть store.dispatch или нет ".

Answer 2

Промежуточное программное обеспечение формирует конвейер вокруг фактической функции Redux store.dispatch. Когда вы звоните store.dispatch(action), вы на самом деле вызываете первое промежуточное ПО в цепочке. Внутри промежуточного программного обеспечения next передает значение следующему промежуточному программному обеспечению, а storeAPI.dispatch перезапускает конвейер . action - это значение, которое было передано dispatch (или передано next из предыдущего промежуточного программного обеспечения).

Эта визуализация может помочь:

Реальная реализация по общему признанию немного магического кода , но не о чем вам следует беспокоиться.

Подробнее см. раздел «Расширяемость и промежуточное программное обеспечение» моего «Семинара по основам Redux» содержит слайды , а также эти статьи о том, как работает промежуточное ПО Redux .