Reader small image

You're reading from  Redux Made Easy with Rematch

Product typeBook
Published inAug 2021
Reading LevelIntermediate
PublisherPackt
ISBN-139781801076210
Edition1st Edition
Languages
Tools
Right arrow
Author (1)
Sergio Moreno
Sergio Moreno
author image
Sergio Moreno

Sergio Moreno is a front-end developer with more than 4 years of experience really focused in the analysis, design, development and building large-scale applications. Formerly worked at Allfunds, the world's largest fund distribution network, he led the front-end team to build a full new suite of products for the new Digital section of Allfunds. He entered the open-source world in 2019 where's contributed to big companies like Google, Facebook, Airbnb, or Pinterest and much more. In 2020 focused his contributions to Rematch, where he released the v2 version with a full rewrite of the codebase and a full compatibility with Typescript and so many improvements like reducing the bundlesize in some cases by 110%, and Lingui, an amazing internationalization library, who helped to release the v3 version. In 2021, joined Flowable as Product Engineer, a compact and highly efficient workflow and business process management platform for developers, system admins and business users.
Read more about Sergio Moreno

Right arrow

Migrating dispatch actions to effects

In our to-do app, we had four actions:

  • Adding a task
  • Removing a task
  • Toggle completed
  • Clear completed

Let's look at each one in more detail.

Adding a task

The following code snippet shows how to add a task to our store:

store.dispatch({
   type: "ADD_TODO",
   title: inputValue
});

With Rematch, this type of dispatch works out of the box, but it isn't recommended to use because it isn't type-safe and isn't very readable.

In Rematch, we adopt an alternative strategy of what Redux offers initially with the dispatch method. When Rematch initialises the store through the init() function or we add a new model using the store.addModel() function, we iterate over all the models and we create shortcuts for each reducer and effect for each model of our store. This means that we can access any reducer or effect of our store using direct access, such as...

lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Redux Made Easy with Rematch
Published in: Aug 2021Publisher: PacktISBN-13: 9781801076210

Author (1)

author image
Sergio Moreno

Sergio Moreno is a front-end developer with more than 4 years of experience really focused in the analysis, design, development and building large-scale applications. Formerly worked at Allfunds, the world's largest fund distribution network, he led the front-end team to build a full new suite of products for the new Digital section of Allfunds. He entered the open-source world in 2019 where's contributed to big companies like Google, Facebook, Airbnb, or Pinterest and much more. In 2020 focused his contributions to Rematch, where he released the v2 version with a full rewrite of the codebase and a full compatibility with Typescript and so many improvements like reducing the bundlesize in some cases by 110%, and Lingui, an amazing internationalization library, who helped to release the v3 version. In 2021, joined Flowable as Product Engineer, a compact and highly efficient workflow and business process management platform for developers, system admins and business users.
Read more about Sergio Moreno