If you followed all the steps correctly, you should be able to see this view using Chrome in your desktop:

And if you activate the Chrome Device Emulator, or if you use a real device or the iPhone simulator, you will see this view:

What is mapStateToProps?

The mapStateToProps function typically confuses many people, but it is easy to understand. It takes a piece of the state (from the store), and it passes it into your component as a prop. In other words, the parameter that receives mapStateToProps is the Redux state, and inside you will have all the reducers you have defined in rootReducer, and then you return an object with the data you need to send to your component. Here's an example:

function mapStateToProps(state) {
  return {
    isMobile: state.device.isMobile
  };
}

As you can see, the state has a device node, which is our deviceReducer; there are other ways to do this that, most of the time, confuse many people. One way is by using ES6 destructuring and arrow functions something like this:

const mapStateToProps = ({ device }) => ({
  isMobile: device.isMobile
});

Also, there is another way to do it directly in the connect middleware. Usually, this can be confusing, to begin with, but once you get used to it, it's the way to go. I typically do this:

export default connect(({ device }) => ({
  isMobile: device.isMobile
}), null)(Home);

After we map our Redux state to the props, we can retrieve the data like this:

const { isMobile } = props;

As you can see, for the second parameter, mapDispatchToProps, I directly sent a null value since we are not dispatching an action in this component yet. In the next recipe, I am going to talk about mapDispatchToProps.