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?
    4. Flux Actions
    5. Flux Dispatcher
    6. Flux Stores
    8. How does Redux work?
    9. Reducers
    10. Stores
    11. Summary
  8. Chapter 2: Why Rematch over Redux? An Introduction to Rematch Architecture
    1. Technical requirements
    2. Why Rematch?
    3. Setting up a store
    4. Reducers
    5. Async/await over Redux Thunk
    6. Reducers and effects
    7. Folder structure
    8. How does Rematch work?
    9. Name
    10. State
    11. Reducers
    12. Effects
    13. 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
    5. Adding a task
    6. Removing a to-do task
    7. Toggling tasks to show as completed
    8. Clearing completed tasks
    9. Dispatching actions
    10. 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
    6. Adding a task
    7. Removing a task and toggle completed
    8. Clear completed
    9. 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
    4. Header
    5. Product List
    6. List component
    7. Summary
  13. Chapter 6: React with Rematch – The Best Couple – Part II
    1. Technical requirements
    2. Creating the shop business logic
    3. getProducts()
    4. Adding products to the cart
    5. Removing products from the cart
    6. Restoring the cart to its initial state
    7. Binding components with business logic
    8. Connecting the product list
    9. Loading more items on scroll
    10. Connecting our application to the Cart logic
    11. Restoring the cart to an empty state
    12. Introducing the search feature
    13. Adding to favorites
    14. Summary
  14. Chapter 7: Introducing Testing to Rematch
    1. Technical requirements
    2. Introduction to JavaScript testing
    3. Types of tests
    4. Test frameworks
    5. Mocking in tests
    6. Coverage
    7. Preparing the environment
    8. Configuring Jest
    9. Configuring MSW
    10. Creating tests for Rematch models
    11. Creating tests for React components
    12. Summary
  15. Chapter 8: The Rematch Plugins Ecosystem
    1. Technical requirements
    2. Introduction to Rematch plugins
    3. config
    4. exposed
    5. createMiddleware
    6. onReducer
    7. onRootReducer
    8. onModel
    9. onStoreCreated
    10. The Rematch loading plugin
    11. Installing and configuration
    12. Example usage
    13. The Rematch select plugin
    14. Installing and configuration
    15. Example usage
    16. The Rematch Immer plugin
    17. Installation and configuration
    18. Example usage
    19. The Rematch updated plugin
    20. Installation and configuration
    21. The Rematch persist plugin
    22. Installation and configuration
    23. 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
    4. onModel
    5. createMiddleware
    6. Testing our plugin
    7. Publishing to NPM
    8. Summary
  18. Chapter 10: Rewrite a Full Code Base from JavaScript to TypeScript
    1. Technical requirements
    2. Introduction to TypeScript
    3. Generics
    4. Rematch utility types
    5. RootModel
    6. init<RootModel, ExtraModels>()
    7. createModel
    8. RematchRootState
    9. RematchDispatch
    10. Converting Rematch models to TypeScript
    11. Creating the configuration file
    12. Renaming our files
    13. Installing declaration files
    14. Creating the RootModel interface
    15. Using createModel in a Rematch model
    16. Making payloads fully typed
    17. TypeScript with React and Rematch
    18. 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
    4. Creating the workspace
    5. Creating distributable business logic
    6. Using the business logic in our Amazhop website
    7. Creating a React Native application with Expo
    8. Integrating the Amazhop logic
    9. Summary
  20. Chapter 12: Rematch Performance Improvements and Best Practices
    1. Technical requirements
    2. Before optimizing, measure
    3. Google Chrome DevTools
    4. The React DevTools extension
    5. Google Chrome Lighthouse
    6. Debouncing and throttling
    7. Virtualizing large lists
    8. React optimizations
    9. useMemo
    10. useCallback
    11. Redux selectors with shallow comparison
    12. Using the @rematch/select package
    13. The shallowEqual function
    14. Redux batching
    15. Data normalization
    16. Summary
  21. Chapter 13: Conclusion
    1. Wrapping up
    2. Rematch essentials
    3. Building real-world websites with Rematch
    4. Diving deeper into Rematch
    5. The future of Rematch
    6. The future of Redux
    7. Curtains down
    8. Why subscribe?
  22. Other Books You May Enjoy
    1. Packt is searching for authors like you