Create a Redux Store for Use with a State ADT Based Reducer

Instructor: [00:00] In order to use a Redux store, we must first create one, which we can do with this create store function provided by Redux, which we bring into our store file.

[00:08] To provide an initial state for our store, we use this convenient initial state function, which we also import into our store file by plucking it off of our initialize model, which will return all of the state we need to get up and running.

[00:22] Finally, we also need to pull in our main reducer, giving it the amazing name of reducer and just plucking it off of the default from the index and data reducers.

[00:32] With all the pieces on the board, we export our store by calling create store, passing it the reducer and populating the state with the call to initial state. That's it. We now have a working Redux store fully integrated with our state model. We can now import it into our main index file from data store and take it for a spin.

[00:52] To both dispatch actions and peek at how our state is transitioned over time, we'll pluck both dispatch and get state from our new store for use in this index file. To see what we've got cooking already, we'll log our call to get state to find our expected initial state, allowing us to peek at our state with every dispatched action.

[01:12] Now let's step through a mocked game flow by first dispatching the start game action to generate the cards and show them to the player to be memorized. Then about five seconds later, the hide all cards action is dispatched, which deselects all cards, flipping them over to put them in a state to be selected.

[01:29] We need an action to start our turn, but currently don't have one. Over in our turn model, we'll create this reset is correct state transition, taking a unit for its input.

[01:39] We define reset is correct as a function that takes a unit to a state app state of unit. Then we just reach for the over helper, pointing it at is correct and providing it with the crocks constant combiner loaded up with a null value.

[01:54] At the start of every turn, we'd like to combine both a next hint transition to randomly pick an unselected card and the reset is correct transition, to set is correct to null. Let's combine both of these Kleisli arrows with a Kleisli composition simply called turn, which we'll define as a function that goes from unit to a state app state of unit.

[02:16] Using the crocks compose K helper function, we build a composition of reset is correct after next hint. With nothing else needing to be exported from this file, we'll export turn as the default.

[02:28] With our state transition in the bag, we need to make it available for use in Redux. We import it into our turn reducer from model turn, then create a start turn action name to be used with the action creator and the reducer. We'll then just copy show feedback and paste it in for a new action creator that will call start turn that expects a unit as opposed to a string for input.

[02:52] To round it off, we update the export name and the action name accordingly. Then add an entry to our reducer for the start turn action, associating it to our turn state transaction. With the means to start a turn, we just pluck off our brand new action creator from the turn reducer and simulate the start of a turn by dispatching it, picking this yellow square as our first hint.

[03:15] To make it a wee bit easier to demo, we'll load up the initialize model and replace the seed of our number generator to the static integer 23 to generate the same sequence with every save. As we see, the player is being shown a hint of blue square.

[03:30] Let's have them pick correctly by dispatching a select card action with a correct ID of blue dash square, marking the card selected, and updating the move counters accordingly.

[03:41] After the card is revealed, show feedback is dispatched, updating is correct and rank to provide feedback to the player. A short time later the next turn starts, removing the feedback and picking a new hint, like this orange triangle. Now we can use these three dispatches to simulate a turn.

[03:58] Let's handle turn two with a little copypasta and update our player selection with another correct answer of orange triangle for both select card and show feedback. We see all of our state transitioned accordingly and as expected.

[04:13] We'll finish the demo on turn three where our player doesn't fare quite as well. This time, they were shown a blue triangle but chose poorly with a green one, making our angry little bunny a bit more happy.