title: How does "next" work in react-redux middleware?
body: <p>I'm new to React and Redux. I have a simple app where you can add input text to an unordered list. I have middleware that prevents specific words from being displayed. I don't understand the order of operations that implement middleware. From what I understand, when I trigger a dispatch, what happens is something along the lines of:</p>
  
  <ol>
  <li>Trigger dispatch from form submit event</li>
  </ol>
  
  <pre><code>// title is an object with a string
  function handleSubmit(event) {
      props.addArticle(title);
  }
  </code></pre>
  
  <ol start="2">
  <li>Go through middleware function:</li>
  </ol>
  
  <pre><code>// store.js
  const store = createStore(
    rootReducer, // this is defined elsewhere and effectively handles actions
    applyMiddleware(forbiddenWordsMiddleware)
  );
  </code></pre>
  
  <pre><code>// 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) =&gt;
                      action.payload.title.includes(word)
                  );
                  if (foundWord.length) {
                      return dispatch({ type: "FOUND_BAD_WORD" });
                  }
              }
              return next(action);
          };
      };
  }
  </code></pre>
  
  <p>How does the above function actually work with createStore and applyMiddleware? Especially confusing to me is the <code>next(action)</code> line. Where do next and action come from? I'm having trouble visualizing the linear execution from form submit to checking for forbidden words.</p>