Redux and the State ADT
Create Redux Middleware to Dispatch Multiple Actions
We only have a few dispatching functions that need to be known by our React Application. Each one actually has multiple actions that need to be dispatched. While we could just have many imperative calls to dispatch in our dispatching functions, but why not use it as an excuse to use an array and write some middleware.
We will create a middleware function that will check dispatched actions to see if they are arrays. If a given action is an array we loop over the array, dispatching each action in turn. If it is not however, we just pass it along to be handled downstream.
Instructor: [00:00] We start in our game container component with the start dispatching function that we use to dispatch our start game action that takes our initial state and generates nine random cards when this button is clicked, displaying the start game action in the action list of the Redux DevTools, and peeking at the state, we see our cards' array populated as expected.
[00:21] We would like to also dispatch this hide-all cards action at the same time as our start game action, but as it sits now, we can only dispatch one thing with our store's dispatch function. Sounds like a good case for some middleware.
[00:34] Inside of our multi-middleware file, we'll export this function that we call multi-middleware as the default plugging dispatch off the store provided to us. We then return a binary [inaudible] function taking the next function first followed by an action, also making sure our error function doesn't return anything, which is a sure sign of a side effect.
[00:55] We now want to check our action to see if it happens to be in array, which we can do by bringing in. This is same type predicate function provided by crux that compares constructors or instances to other instances to see if they are the same type.
[01:09] Now when the body of our function will use a ternary that checks if the array constructor matches the constructor of our action instance. If it does, we can then invoke for each on it, providing it a function dispatching each item of the array. If we don't have an array, we pass the action along to the next middleware in the chain.
[01:28] Now, we need to get our new hardness into our Redux flow. To get the ball rolling, in our stored file, we import in multi-middleware from our multi-file located in our middleware folder.
[01:40] We also need to reach into Redux to pull of this applied middleware function that allows us to create an enhancer that can be composed, which will leverage by creating this middleware variable that holds the result of calling applied middleware providing it our brand-new multi-middleware function.
[01:56] Now that we have an enhancer, we can replace the identity placeholder with our middleware enhancer and satisfy our linter by removing identity import. With that, we're all hooked up to handle dispatch arrays.
[02:08] In our game container, we'll now dispatch an array that holds our start game action and another to be named, which will immediately bring in by pulling hide-all cards after the same game reducer that we pull start game from, replacing the second action with hide-all cards.
[02:24] Now when we click the start game button, we see nine flipped-over cards and observe our two actions with hide-all cards removing selected true from each. We can jump back to start game to show the cards and then jump forward to hide-all cards, finding them flipped and ready to be guessed.