Redux Made Easy with Rematch E-Book

Sergio Moreno

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch
• Veröffentlichungsjahr: 2021

Seitenzahl: 284

Beschreibung

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 codebase.
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 layers of Rematch. You’ll learn how to migrate from Redux, and write plugins to set up a fully tested store by integrating it with vanilla JavaScript, React, and React Native. You'll then build a real-world application from scratch with the power of Rematch and its plugins. As you advance, you’ll see how plugins extend Rematch functionalities, understanding how they work and help to create a maintainable project. Finally, you'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.

Leseprobe

Redux Made Easy with Rematch

Reduce Redux boilerplate and apply best practices with Rematch

Sergio Moreno

REMATCH IS AN IMPRINT OF PACKT PUBLISHING

Redux Made Easy with Rematch

Copyright © 2021 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Associate Group Product Manager: Pavan Ramchandani

Publishing Product Manager: Aaron Tanna

Senior Editor: Hayden Edwards

Content Development Editor: Feza Shaikh

Technical Editor: Shubham Sharma

Copy Editor: Safis Editing

Project Coordinator: Manthan Patel

Proofreader: Safis Editing

Indexer: Sejal Dsilva

Production Designer: Nilesh Mohite

First published: August 2021

Production reference: 1270821

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

978-1-80107-621-0

www.packt.com

Contributors

About the author

Sergio Moreno is a frontend developer with more than 4 years of experience heavily focused on the analysis, design, development, and building of large-scale applications. Formerly working at Allfunds, the world's largest fund distribution network, he led the frontend team to build a full new suite of products for the new digital section of Allfunds. He entered the open source world in 2019 and has contributed to big companies including Google, Facebook, Airbnb, Pinterest, and many more. In 2020, he focused on contributions to Rematch, where he released the v2 version with a full rewrite of the code base, full compatibility with TypeScript, and many other improvements, such as reducing the bundle size in some cases by 80%. He is also now the lead mantainer of the LinguiJS library, an amazing internationalization library. He helped to release the v3 version and took on the role of leading the coming years of development of LinguiJS.

In 2021, he joined Flowable as a product engineer, working on their compact and highly efficient workflow and business process management platform for developers, system admins, and business users.

I would like to say a big thank you to everyone involved in the release of this book – for me, it has been such an amazing experience that I'll never forget. Thanks to everyone who has contributed to making this possible – Shawn and Blair, the creators of Rematch, and the amazing open source community around Rematch and Redux, thank you all.

About the reviewers

Mark Erikson is a software engineer living in southwest Ohio, USA. Mark is a Redux maintainer, creator of Redux Toolkit, and general keeper of the Redux docs. He tweets at acemarke, and frequently blogs about React, Redux, and other web dev topics. He spends much of his time answering questions about React and Redux anywhere there's a comment box on the internet, and usually hangs out in the Reactiflux chat channels.

Zhi Tian is a frontend developer living in Beijing, China. Zhi is working at Kuaishou, the China's second-largest short video company, he focused mainly on enterprise software development and SaaS. He is a software engineering graduate from Harbin Institute of Technology, one of the top global universities in engineering. He is an active contributor of open source community and an enthusiast of TypeScript and the type system behind it. As a collaborator of Rematch he has contributed a lot, especially the improvement of the Rematch type system.

Table of Contents

Preface

Section 1: Rematch Essentials

Chapter 1: Why Redux? An Introduction to Redux Architecture

Technical requirements

Why Redux?

What was there before Redux?

Flux Actions

Flux Dispatcher

Flux Stores

Views

How does Redux work?

Reducers

Stores

Summary

Chapter 2: Why Rematch over Redux? An Introduction to Rematch Architecture

Technical requirements

Why Rematch?

Setting up a store

Reducers

Async/await over Redux Thunk

Reducers and effects

Folder structure

How does Rematch work?

Name

State

Reducers

Effects

Summary

Chapter 3: Redux First Steps – Creating a Simple To-Do App

Technical requirements

Preparing the environment

Creating our first store

Creating our first reducer

Adding a task

Removing a to-do task

Toggling tasks to show as completed

Clearing completed tasks

Dispatching actions

Summary

Chapter 4: From Redux to Rematch – Migrating a To-Do App to Rematch

Technical requirements

Introducing the Rematch library

Migrating a Redux store to Rematch init

Migrating Redux reducers to Rematch reducers

Migrating dispatch actions to effects

Adding a task

Removing a task and toggle completed

Clear completed

Summary

Section 2: Building Real-World Web Apps with Rematch

Chapter 5: React with Rematch – The Best Couple – Part I

Technical requirements

Preparing the environment

Creating the user interface components

Header

Product List

List component

Summary

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

Technical requirements

Creating the shop business logic

getProducts()

Adding products to the cart

Removing products from the cart

Restoring the cart to its initial state

Binding components with business logic

Connecting the product list

Loading more items on scroll

Connecting our application to the Cart logic

Restoring the cart to an empty state

Introducing the search feature

Adding to favorites

Summary

Chapter 7: Introducing Testing to Rematch

Technical requirements

Introduction to JavaScript testing

Types of tests

Test frameworks

Mocking in tests

Coverage

Preparing the environment

Configuring Jest

Configuring MSW

Creating tests for Rematch models

Creating tests for React components

Summary

Chapter 8: The Rematch Plugins Ecosystem

Technical requirements

Introduction to Rematch plugins

config

exposed

createMiddleware

onReducer

onRootReducer

onModel

onStoreCreated

The Rematch loading plugin

Installing and configuration

Example usage

The Rematch select plugin

Installing and configuration

Example usage

The Rematch Immer plugin

Installation and configuration

Example usage

The Rematch updated plugin

Installation and configuration

The Rematch persist plugin

Installation and configuration

Summary

Section 3: Diving Deeper into Rematch

Chapter 9: Composable Plugins – Create Your First Plugin

Technical requirements

Preparing the environment

Creating our plugin

onModel

createMiddleware

Testing our plugin

Publishing to NPM

Summary

Chapter 10: Rewrite a Full Code Base from JavaScript to TypeScript

Technical requirements

Introduction to TypeScript

Generics

Rematch utility types

RootModel

init<RootModel, ExtraModels>()

createModel

RematchRootState

RematchDispatch

Converting Rematch models to TypeScript

Creating the configuration file

Renaming our files

Installing declaration files

Creating the RootModel interface

Using createModel in a Rematch model

Making payloads fully typed

TypeScript with React and Rematch

Summary

Chapter 11: Rematch with React Native and Expo – A Real-World Mobile App

Technical requirements

Introduction to workspaces

Setting up our workspace

Creating the workspace

Creating distributable business logic

Using the business logic in our Amazhop website

Creating a React Native application with Expo

Integrating the Amazhop logic

Summary

Chapter 12: Rematch Performance Improvements and Best Practices

Technical requirements

Before optimizing, measure

Google Chrome DevTools

The React DevTools extension

Google Chrome Lighthouse

Debouncing and throttling

Virtualizing large lists

React optimizations

useMemo

useCallback

Redux selectors with shallow comparison

Using the @rematch/select package

The shallowEqual function

Redux batching

Data normalization

Summary

Chapter 13: Conclusion

Wrapping up

Rematch essentials

Building real-world websites with Rematch

Diving deeper into Rematch

The future of Rematch

The future of Redux

Curtains down

Other Books You May Enjoy

Section 1: Rematch Essentials

On completion of this part, you will be able to understand why and how Redux was created. You'll learn what the motivations were for creating Rematch and how it works internally. Also, you'll learn how to create a simple to-do app with Vanilla JavaScript with Redux, and to close the section, you'll migrate that application to Rematch.

In this section, we include the following chapters:

Chapter 1, Why Redux? An Introduction to Redux ArchitectureChapter 2, Why Rematch over Redux? An Introduction to Rematch ArchitectureChapter 3, Redux First Steps – Creating a Simple To-Do AppChapter 4, From Redux to Rematch – Migrating a To-Do App to Rematch

Chapter 2: Why Rematch over Redux? An Introduction to Rematch Architecture

In this chapter, we'll briefly analyze the reasons why Rematch was created. We'll also see how Rematch works internally and how it's possible to reduce Redux boilerplate with Rematch. We'll learn how Rematch, despite being less than 2 kilobytes in size, can reduce the code that we need to set up Redux by 90%.

This chapter is important for understanding the key concepts of Rematch that we'll be looking at in the next few chapters.

In this chapter, we will cover the following topics:

Why Rematch?How does Rematch work?

By the end of this chapter, you will be able to understand any Rematch concept as well as understand why Rematch was created and how the developer experience gets improved by using the latest JavaScript features.

Technical requirements

To follow along with this chapter, all you will need is a basic knowledge of ES6 JavaScript.

Why Rematch?

Rematch was created in 2017 by Shawn McKay and Blair Bodnar, a pair of Canadian programmers who thought that Redux should be simpler and easier to use.