Bombing JavaScript Fatigue with Minesweeper (Part 3— Actions & Component)

Now that we have our state described via Redux reducers, let’s make some Action Creators. After this, we’ll have all the pieces we need to start building a Minesweeper UI.

When I make ActionCreators I like to encapsulate the business logic inside small functions that can be unit tested. I tend to import the Store reference and dispatch directly instead of using the connect functions dispatch prop. Ever since the change from Blaze, I’ve been more keen on separating the concerns of actions away from the Component itself.

Below I define what I consider the “public” API of my Minesweeper app. This means that I have separated the business logic of how the app works into a clean set of functions that my UI can depend on. This is another helpful way to separate your concerns a little more.

Setting Difficulty

We’ll export several functions to our UI that will change the state of the difficulty in our application.

Game Timer

In our UI we’ll probably use our React Components to setIntervals. Let’s show our game time state action.

Opening Tiles

When the user interacts with tile of the board, we need to update our state.

Checking Tiles with Flags

Game Over

Resets

When a user wants to start over, we actually need to reset a lot of game state. So we’ll dispatch to our store to reset the tiles, flags, and time.

Judging the game

Whenever our component receives an update to state or props, we want to judge the game to see if we won.

Now we have defined the public API of our app. Any component we build can call these actions and the state of our app will change accordingly.

Components

Let’s wrap up our Component. I’m going to take common Minesweeper components from Open Source and hook our state and actions into them.

Our app’s Tiles, Rows, and Table is based off:

So the plan is to create our container to feed the state into these UI Components. We’ll make a component called Minesweeper that will connect to Redux and create methods and pass methods to child components.

And with that we can set our main.js file and start playing:

Full code:

There we have it! We should have fully functional minesweeper app! Built entirely with React and Redux. And all our tooling was managed by Meteor.

This post is part of a series called Mastering Meteor and Redux. You can read the course syllabus here. Follow me on Twitter @abhiaiyer and I’ll see you for the next chapter.