Preface
Rematch is Redux best practices without the boilerplate. This book is an easy-to-read guide for anyone who wants to get started with Redux, and for those who are already using it and want to improve their code base.
Complete with hands-on tutorials, projects, and self-assessment questions, this easy-to-follow guide will take you from the simplest through to the most complex layer of Rematch. You'll learn how to migrate from Vanilla Redux to Rematch, even from JavaScript to Typescript. You'll also learn how to create Rematch plugins from scratch and how they can be used in any Rematch application. You'll then build a real-world application from the first steps, doing the design and preparing the layout, to later, with the power of Rematch and its plugins, building a superpowerful shopping application. As you advance, you'll see how plugins extend Rematch functionalities, understanding how they work and how they can be used in our Rematch applications. You'll learn how to do everything you need to build a React website and React Native application from the first steps of designing the interface to later ones such as publishing, testing, and optimizing performance.
Finally, we'll analyze the future of Rematch and how the frontend ecosystem is becoming easier to use and maintain with alternatives to Redux.
By the end of this book, you'll be able to have total control of the application state and use Rematch to manage its scalability with simplicity.
Who this book is for
This book is for React and Redux developers looking for better alternatives to Redux. Familiarity with JavaScript, React, and Redux will help you make the most of this book.
What this book covers
Chapter 1, Why Redux? An Introduction to Redux Architecture, analyzes in depth what design limitations Redux was designed to fix and how it evolved to be the framework that it is today.
Chapter 2, Why Rematch over Redux? An Introduction to Rematch Architecture, briefly explores Rematch's most basic concepts to get started and why and how it was created.
Chapter 3, Redux First Steps – Creating a Simple To-Do App, looks at creating a simple to-do tasks website using Vanilla JavaScript and Redux.
Chapter 4, From Redux to Rematch – Migrating a To-Do App to Rematch, covers migrating the previous to-do tasks website to Rematch, looking at the biggest differences.
Chapter 5, React with Rematch – The Best Couple – Part I, demonstrates, step by step, how to create a shopping store with the latest React technologies, such as Hooks, and using the most modern frameworks, such as Tailwind CSS, and bundling it with Vite.
Chapter 6, React with Rematch – The Best Couple – Part II, looks at how to introduce business logic with Rematch and binding this logic into reusable React components.
Chapter 7, Introducing Testing to Rematch, explains how to set up a real testing suite step by step, testing the business logic and the user interface with the latest frameworks, such as Jest and React Testing Library.
Chapter 8, The Rematch Plugins Ecosystem, explores how Rematch Plugins easily extend Rematch functionality through the official API, analyzing in depth how they work internally and explaining the most important concepts.
Chapter 9, Composable Plugins – Create Your First Plugin, runs through creating a Rematch plugin ready to be published and used by everyone on the ground.
Chapter 10, Rewrite a Full Code Base from JavaScript to TypeScript, goes through migrating our shopping store website to TypeScript, focusing a lot on which types Rematch exports and how these utility types can warn us about possible bugs in our business logic.
Chapter 11, Rematch with React Native and Expo – A Real-World Mobile App, goes through setting up a monorepo architecture from scratch, where we'll learn how Rematch makes it extremely easy to share business logic with the entire organization and how this logic can be reused in other frameworks like React Native.
Chapter 12, Rematch Performance Improvements and Best Practices, analyzes which optimizations can be done to our shopping store website and we'll learn how we can measure our website performance before applying any optimization.
Chapter 13, Conclusion, discusses the future of Rematch and how the frontend ecosystem, and especially state management solutions, have become more user-friendly lately, and what alternatives to Rematch exist today.
To get the most out of this book
You will need a version of Node.js equal to or higher than 12 (LTS recommended). All code examples have been tested locally with Node.js 14 and above on macOS Big Sur and later, but they should work with future versions and other operating systems. The Rematch version used in the book is greater than or equal to version 2.
If you are using the digital version of this book, we advise you to type the code yourself or access the code from the book's GitHub repository (a link is available in the next section). Doing so will help you avoid any potential errors related to the copying and pasting of code.
After reading the book, I encourage you to visit https://rematchjs.org and join the official Discord Rematch Community (https://discord.gg/zMzsMGvEHk) where we answer any questions and we try to solve any problems you find with Rematch.
Download the example code files
You can download the example code files for this book from GitHub at https://github.com/PacktPublishing/Redux-Made-Easy-with-Rematch. If there's an update to the code, it will be updated in the GitHub repository.
We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Download the color images
We also provide a PDF file that has color images of the screenshots and diagrams used in this book. You can download it here:
https://static.packt-cdn.com/downloads/9781801076210_ColorImages.pdf.
Conventions used
There are a number of text conventions used throughout this book.
Code in text: Indicates code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles. Here is an example: "Rematch models contain a state property, a reducers property, and an effects property."
A block of code is set as follows:
const value = 10_000
console.log(value.toLowerCase())
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
export const shop = createModel<RootModel>()({
state: {},
reducers: {},
effects: (dispatch) => ({})
})
Any command-line input or output is written as follows:
yarn add --dev typescript
Bold: Indicates a new term, an important word, or words that you see onscreen. For instance, words in menus or dialog boxes appear in bold. Here is an example: "When clicking the Clear completed button, all the tasks will be removed from the list because it's a to-do list application, so completed tasks shouldn't appear on it."
Tips or important notes
Appear like this.
Get in touch
Feedback from our readers is always welcome.
General feedback: If you have questions about any aspect of this book, email us at [email protected] and mention the book title in the subject of your message.
Errata: Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you have found a mistake in this book, we would be grateful if you would report this to us. Please visit www.packtpub.com/support/errata and fill in the form.
Piracy: If you come across any illegal copies of our works in any form on the internet, we would be grateful if you would provide us with the location address or website name. Please contact us at [email protected] with a link to the material.
If you are interested in becoming an author: If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, please visit authors.packtpub.com.
Share Your Thoughts
Once you've read Redux Made Easy with Rematch, we'd love to hear your thoughts! Please click here to go straight to the Amazon review page for this book and share your feedback.
Your review is important to us and the tech community and will help us make sure we're delivering excellent quality content.