For this project I decided to try my ‘hand’ at a basic card game. My previous projects displayed information and often allowed a user to submit a form. This time around I wanted to create something that was more functional. Since I would be using both React and Redux it seemed a great opportunity to update and access state throughout the game. The card game Sevens seemed a good candidate for several reasons. If you have never played the game a simple overview is this. Using one deck, you deal all cards to the players. I decided on a four-player game so each player receives 13 cards. To begin the game, you must be able to play a 7. After that you can play off of the existing cards or play another 7. The board would eventually resemble something like this.
To get started, I used the create-react-app generator, it provides a React application starter to build a single-page React app. Next, I installed React-Redux. This allows your React components to read data from a Redux store, and dispatch actions to the store to update data. React Redux also provides a connect function which allows you to connect your components to the store. The makes the Redux store available to the rest of the app.
Continuing with the front-end I installed Redux-Thunk. Redux-Thunk is middleware used to handle asynchronous actions in Redux. By default, Redux action creators do not support asynchronous actions like fetching data, so we need to utilize Redux Thunk. Using this middleware avoids running into a problem where the action creator returns an action before the data is fetched. Last I installed React Router. React Router allows single page applications (SPA) to navigate through multiple views without having to reload the entire page.
For the back-end I used the rails generator new my_api –api . Using this generator will configure your application to start with a more limited set of middleware than normal. It will not include any middleware primarily useful for browser applications (like cookies support) by default. It will also make ApplicationController inherit from ActionController::API instead of ActionController::Base. This leaves out any Action Controller modules that provide functionalities primarily used by browser applications. It will skip generating views, helpers, and assets when you generate a new resource.
Once both the front-end and back-end were working and properly connected, it was time to play some cards.
Since this was my first project using React and Redux, I did find it challenging. In the end I gained an appreciation for how Redux allows you to share state across components. I would certainly use it again.
Top comments (0)