Chapter 6: React with Rematch – The Best Couple – Part II

In this chapter, we'll complete the work that we started in the previous chapter, where we analyzed the mockups and transformed those requirements into a complete web shop application using Tailwind and React, but the application didn't have any interactivity. In this chapter, we'll be able to list products within an infinite scrolling list calling to an external API, add them to a shopping cart, and create a favorite system where the user can add products to a favorites list.

In this chapter, we'll cover the following topics:

• Creating the shop business logic
• Binding components with business logic

By the end of the chapter, you'll be able to create any application with side effects, call any API remotely, and treat this data to create business logic and inject it into isolated components with a design system such as Tailwind. We'll see how we can build our application...

Technical requirements

To follow along with this chapter, you will need the following:

• Basic knowledge of vanilla JavaScript and ES6 features
• Basic knowledge of HTML5 features
• Node.js >= 12 installed
• Basic knowledge of React and CSS
• A browser (Chrome or Firefox)
• A code editor (for example, Visual Studio Code)

You can find the code for this chapter in the book's GitHub repository at https://github.com/PacktPublishing/Redux-Made-Easy-with-Rematch/tree/main/packages/chapter-6.

Creating the shop business logic

As we explained in Chapter 5, React with Rematch – The Best Couple – Part I, in the Preparing the environment section, we're using an interesting NPM module named json-server (https://github.com/typicode/json-server) that converts static JavaScript Object Notation (JSON) files to API endpoints ready to use. This module is really powerful for this book because it will allow us to call a fake API to access the data. A real API recovers the data from a database, but in our case, this data is just static. However, the way this data is accessed from our side, on the frontend, is the same as would be employed in a real API.

When we start our application with yarn dev, it automatically runs a server on http://localhost:3000 to see the refreshed changes of our frontend application, while also running a server on http://localhost:8000. If we access this URL, we should see something like this:

Figure 6.1 –...

Binding components with business logic

In this section, we're going to explore how all this logic we've introduced can be injected inside our React application, using React hooks. Hooks are a new addition to React 16.8. They let you use the state and other React features without writing a class. This is the recommended approach of developing components with React since we often have problems with maintaining components that started out simple but have grown into an unmanageable mess of stateful logic and side effects, becoming, all in all, unmaintainable. If you don't know how hooks work, reading this official React guide should be the first step: https://reactjs.org/docs/hooks-intro.html.

The react-redux library includes its own custom hook APIs, which allow your React component to subscribe to the Redux store and also to the Rematch stores. Rematch is 100% compatible with the react-redux library and works out of the box with its API, making any migration from Redux...

Summary

In this chapter, we have learned how to create an amazing, complete, Amazon-like application. We have also learned how Rematch affects work in real API requests, how we can design, analyze, and start developing some client requirements, and, most importantly, how Rematch architecture makes developing any application easy and predictable.

Now, we'll be able to create any application with Rematch and React with side effects, including carrying out the first steps of analyzing our clients' requirements, converting them to mockups, and then creating our application without any business logic with just styles, and then adding the layer of business logic and connecting this logic to the components. We also saw how to build an application to a single-page application and test Lighthouse performance, and what our application looks like in production mode.

In the next chapter, we'll learn how to integrate Jest and the React Testing Library in this application. We...