March 05, 2017
In this series, I am creating a typing game with React and Redux. Including setting up a backlog, CI, and Testing. You can find the project here
This post is part of the “Making a game with React and Redux” series
Create core reducers
My plan of attack is to create a basic version of the game without any words/blocks generation. To achieve that, first I will create detailed issues (stated above) for what exactly I want to get done
There will be three elements in the game at this point
I will implement the following
Equipped with a cup of coffee and with having some free time, I started to work on the first two reducers (words, blocks) it was straight forward.
When creating reducers, one of my goals was to keep the data normalized (read this article from the redux guide for more about the topic) and to capture as many details in the task itself as possible.
Next task is to implement the inputs reducer. This reducer is a little different, a couple of new concepts are introduced here
A thunk allows actions creators to return a function instead of an object, which enables performing logic that determines what actions to dispatch.
We need this ability, because when the user enters some text, we need to not only update the input in the store but also check if the word matches any other to remove them and the empty blocks, if there are any. We also have to reset the input, if any word is matched. We use selectors in this process to get all the matching words and empty blocks.
After working on the reducers, I realized that I needed to add templates for PR and Issues, for the sake of keeping everything consistent and not repetitive (you can find the templates in this PR)
Finally, to wire everything together, I need to build the actual UI components (Issue here).
The first step is adding react-router, We will not use routing yet, we will only setup a default route to our game (this will change in the future)
In this task, we are creating all the components/containers used for the core game.
Summary about what is happening in the PR
Wordcomponent has logic to highlight the part of a word that matches what is typed