🏠 Table of Contents > ⚒️ Create client State with Redux > ⚒️ Bind Redux to the User Interface
Objectives
React is a great way to build a UI, but we need to connect it to our game state.
In this step 4 we will:
- Build out the NewGame.js component by connecting it to redux.
- Build a test to try out the functionality of NewGame.js
We will cover:
- Import our Redux artifacts
- Use hooks to connect our compoonent to our Redux Store
- Updating the UI
- Running TDD tests
- Merge back to master
- Verify your deployment in Netlify
React is a popular open-source, front end, JavaScript library for building user interfaces or UI components. React makes user interfaces very easy to build by cutting each page into pieces called components. A React component is a bit of code that represents a piece of the page. Each component is a JavaScript function that returns a piece of code that represents a piece of a web page.
Hooks are a fairly new addition in React. They let you use state and other React features without writing a class. In this step, we will be using a hook to extract current state information from our Redux store.
For a FULL code solution to this section click the image below or just go HERE. You can also use the RAW version for easy copying.
Don't forget to SAVE your changes or enable autosave in GitPod.
In this step we will be working with /src/pages/lobby/NewGame/NewGame.js.
In order to bind our React component to our Redux store, we need to import the items that we need:
✅ Step 1a: Create import statements
📘 Code to copy
//let's import what we need
import { useDispatch, useSelector } from "react-redux";
import { selectGame, createGame } from "../../../store/gameSlice";React Hooks allow you to access things like state, React lifecycle methods, and other goodies in function components that were previously only available in class components.
useSelector() is a React Hook which allows you to extract data from the Redux store state, using a selector function. It takes in selector function argument (in this case selectGame) that returns the part of the state that you want.
useDispatch() is a React Hook that allows us to dispatch actions from our React component. Recall the createGame function we created in the last step.
✅ Step 2a: Connect to the store with a hook
📘 Code to copy
// let's connect Redux to our Component
const dispatch = useDispatch();
const { id, idError, idLoading } = useSelector(selectGame);✅ Step 4a: Display game id in the UI
When our game id is set, we want to show it in the UI. If the id is present, it will be rendered in the view. If not, "----" will show up.
The starter code only renders "----" to the view. Let's modify it to include id as well.
📘 Code to copy
{/* let's display the game id */}
{id || "----"}✅ Step 3b: Enable create game button
We also need to change our button to create a new game and also make it disabled while a request is taking place. Add functionality to disable the button during a request.
Here is the initial button:
<Button
style={{ marginTop: 32, marginBottom: 32 }}
disableElevation
size="large"
variant="contained"
color="primary"
>Now add more functionality to the button by concatenating in disabled and onClick code.
📘 Code to copy
{/* let's make our button create a new game*/}
<Button
...concat_start...
disabled={idLoading}
onClick={() => {
dispatch(createGame());
}}
...concat_end...✅ Step 3c: Show errors in the UI
Finally, let's show any errors.
📘 Code to copy
{/* let's show an error message if there is one */}
{idError && (
<Typography color="textSecondary">Error: {idError}</Typography>
)}For a FULL code solution to this section click the image below or just go HERE. You can also use the RAW version for easy copying.
We are provided with test case src/pages/Lobby/NewGame/NewGame.test.js. This test will check to see if our NewGame compenent renders properly. The is used to make that store available to our component tree.
✔️ TEST 1: The NewGame component we created needs to beable to render without crashing.
test("renders without crashing", () => {
render(
<Provider store={store}>
<NewGame />
</Provider>
);
});✅ Step 4a: Test the component
We can run our test to see if the component renders successfully.
📘 Command to execute
npm test src/pages/lobby/NewGame/NewGame.test.js📗 Expected output
Now it's time to merge ALL of the changes from the last 3 sections back to master. This will kick off an automated deploy to Netlify and get our changes ready for production.
📘 Commands to execute
git add functions/insertGame.js src/store/gameSlice.js src/pages/Lobby/NewGame/NewGame.js
git commit -m "Merging insertGame, gameSlice, and NewGame into master"
git push✔️ Once you've completed the push command above go back to YOUR battlestax repository in Github and create a Pull Request to merge the changes into master. Use the same exact process we used in Step01 to do this. If you need a refresher go HERE and then come back here to finsih your deployment.
✔️ When your new site is ready, you will be able to go to: <your_url>.netlify.app to see your game. To find your URL, navigate to Deploys in Netlify and click on the link provided via the UI.
✔️ Once clicked you should see a display like the following:
If you start new games it will create a new record in the database. If you want to validate this behavirour click on START NEW GAME.
✔️ Open Astra UI, show the CQL Console and execute the following command (here battlestax is your keyspace and games your collection name - if you chose another names adapt the query accordingly).
📘 Command to execute
SELECT key, text_value FROM battlestax.games;
You should have a result that looks like the following image. If you see the game you just created in this list you know your application is properly hooked up to your database via the document API.
Alrighty, let's sum all this up. If you got to this point you have now deployed an application through a CI/CD pipeline with GitHub Actions using serverless functions that are globally available via Netlify all backed by the top NoSQL distributed database Apache Cassandra on DataStax Astra without ever touching a server, deploying back-end code, or needing to talk to your IT folks (no harm meant to my IT friends). And if your app goes viral this tech stack will scale with you.
You did this completely from front-end, fullstack knowledge. Awe...some!
Now go take this knowledge and go create the next disruptive application.
🏠 Back to Table of Contents or move to the next section =>Extra Resources and certifications