Redux Made Easy with Rematch

Redux Made Easy with Rematch

by Sergio Moreno
Released August 2021
Publisher(s): Packt Publishing
ISBN: 9781801076210

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Discover the power of Rematch and its plugins by building a real-world application from scratch

Key Features

  • Get to grips with the capabilities of Rematch quickly as you build applications
  • Learn to use Rematch and its plugins to simplify everyday tasks
  • Take total control of the application state and manage its scalability using Rematch

Book Description

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.

What you will learn

  • Understand the principal concepts of Flux and Redux
  • Find out what the main problems are that Rematch solves
  • Become familiar with the Rematch ecosystem
  • Develop an application using Rematch and React together
  • Write unit and integration tests to get 100% test coverage of your programs with Rematch
  • Create a React Native app with Rematch and Expo
  • Persist data with redux-persist and Rematch
  • Build a Rematch plugin from scratch

Who this book is for

This book is for React and Redux users looking for better alternatives for Redux. Familiarity with JavaScript, React, and Redux will help you make the most of this book.

Table of contents

  1. Redux Made Easy with Rematch
  2. Contributors
  3. About the author
  4. About the reviewers
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Download the color images
    6. Conventions used
    7. Get in touch
    8. Share Your Thoughts
  6. Section 1: Rematch Essentials
  7. Chapter 1: Why Redux? An Introduction to Redux Architecture
    1. Technical requirements
    2. Why Redux?
    3. What was there before Redux?
      1. Flux Actions
      2. Flux Dispatcher
      3. Flux Stores
      4. Views
    4. How does Redux work?
      1. Reducers
      2. Stores
    5. Summary
  8. Chapter 2: Why Rematch over Redux? An Introduction to Rematch Architecture
    1. Technical requirements
    2. Why Rematch?
      1. Setting up a store
      2. Reducers
      3. Async/await over Redux Thunk
      4. Reducers and effects
      5. Folder structure
    3. How does Rematch work?
      1. Name
      2. State
      3. Reducers
      4. Effects
    4. Summary
  9. Chapter 3: Redux First Steps – Creating a Simple To-Do App
    1. Technical requirements
    2. Preparing the environment
    3. Creating our first store
    4. Creating our first reducer
      1. Adding a task
      2. Removing a to-do task
      3. Toggling tasks to show as completed
      4. Clearing completed tasks
    5. Dispatching actions
    6. Summary
  10. Chapter 4: From Redux to Rematch – Migrating a To-Do App to Rematch
    1. Technical requirements
    2. Introducing the Rematch library
    3. Migrating a Redux store to Rematch init
    4. Migrating Redux reducers to Rematch reducers
    5. Migrating dispatch actions to effects
      1. Adding a task
      2. Removing a task and toggle completed
      3. Clear completed
    6. Summary
  11. Section 2: Building Real-World Web Apps with Rematch
  12. Chapter 5: React with Rematch – The Best Couple – Part I
    1. Technical requirements
    2. Preparing the environment
    3. Creating the user interface components
      1. Header
      2. Product List
      3. List component
    4. Summary
  13. Chapter 6: React with Rematch – The Best Couple – Part II
    1. Technical requirements
    2. Creating the shop business logic
      1. getProducts()
      2. Adding products to the cart
      3. Removing products from the cart
      4. Restoring the cart to its initial state
    3. Binding components with business logic
      1. Connecting the product list
      2. Loading more items on scroll
      3. Connecting our application to the Cart logic
      4. Restoring the cart to an empty state
      5. Introducing the search feature
      6. Adding to favorites
    4. Summary
  14. Chapter 7: Introducing Testing to Rematch
    1. Technical requirements
    2. Introduction to JavaScript testing
      1. Types of tests
      2. Test frameworks
      3. Mocking in tests
      4. Coverage
    3. Preparing the environment
      1. Configuring Jest
      2. Configuring MSW
    4. Creating tests for Rematch models
    5. Creating tests for React components
    6. Summary
  15. Chapter 8: The Rematch Plugins Ecosystem
    1. Technical requirements
    2. Introduction to Rematch plugins
      1. config
      2. exposed
      3. createMiddleware
      4. onReducer
      5. onRootReducer
      6. onModel
      7. onStoreCreated
    3. The Rematch loading plugin
      1. Installing and configuration
      2. Example usage
    4. The Rematch select plugin
      1. Installing and configuration
      2. Example usage
    5. The Rematch Immer plugin
      1. Installation and configuration
      2. Example usage
    6. The Rematch updated plugin
      1. Installation and configuration
    7. The Rematch persist plugin
      1. Installation and configuration
    8. Summary
  16. Section 3: Diving Deeper into Rematch
  17. Chapter 9: Composable Plugins – Create Your First Plugin
    1. Technical requirements
    2. Preparing the environment
    3. Creating our plugin
      1. onModel
      2. createMiddleware
    4. Testing our plugin
    5. Publishing to NPM
    6. Summary
  18. Chapter 10: Rewrite a Full Code Base from JavaScript to TypeScript
    1. Technical requirements
    2. Introduction to TypeScript
      1. Generics
    3. Rematch utility types
      1. RootModel
      2. init<RootModel, ExtraModels>()
      3. createModel
      4. RematchRootState
      5. RematchDispatch
    4. Converting Rematch models to TypeScript
      1. Creating the configuration file
      2. Renaming our files
      3. Installing declaration files
      4. Creating the RootModel interface
      5. Using createModel in a Rematch model
      6. Making payloads fully typed
    5. TypeScript with React and Rematch
    6. Summary
  19. Chapter 11: Rematch with React Native and Expo – A Real-World Mobile App
    1. Technical requirements
    2. Introduction to workspaces
    3. Setting up our workspace
      1. Creating the workspace
    4. Creating distributable business logic
    5. Using the business logic in our Amazhop website
    6. Creating a React Native application with Expo
      1. Integrating the Amazhop logic
    7. Summary
  20. Chapter 12: Rematch Performance Improvements and Best Practices
    1. Technical requirements
    2. Before optimizing, measure
      1. Google Chrome DevTools
      2. The React DevTools extension
      3. Google Chrome Lighthouse
    3. Debouncing and throttling
    4. Virtualizing large lists
    5. React optimizations
      1. useMemo
      2. useCallback
    6. Redux selectors with shallow comparison
      1. Using the @rematch/select package
      2. The shallowEqual function
    7. Redux batching
    8. Data normalization
    9. Summary
  21. Chapter 13: Conclusion
    1. Wrapping up
      1. Rematch essentials
      2. Building real-world websites with Rematch
      3. Diving deeper into Rematch
    2. The future of Rematch
    3. The future of Redux
    4. Curtains down
    5. Why subscribe?
  22. Other Books You May Enjoy
    1. Packt is searching for authors like you

Product information

  • Title: Redux Made Easy with Rematch
  • Author(s): Sergio Moreno
  • Release date: August 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781801076210