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

In this chapter, we'll learn how to migrate the application that we have created to Rematch step by step. We'll see the main differences that we have already seen theoretically put into practice, and we'll see how Rematch simplifies our code base.

This chapter will explain the main changes that will be required for any type of application, from small ones to enterprise-grade ones, for a successful migration to Rematch.

Rematch simplifies migration in a few steps because, under the hood, it uses Redux internals, so practically all Redux code is compatible with Rematch. Some methods are renamed or simplified to be easier to use.

In this chapter, we will cover the following topics:

• Introducing the Rematch library
• Migrating a Redux store to Rematch init
• Migrating Redux reducers to Rematch reducers
• Migrating dispatch actions to effects

By the end of this chapter...

Technical requirements

You will need the following to complete this chapter:

• Basic knowledge of ES6 features
• Basic knowledge of HTML5 features
• A browser (Chrome or Firefox, for instance)
• A code editor (Visual Studio Code, for instance)

You can find the code for this chapter in the book's GitHub repository at https://github.com/PacktPublishing/Redux-Made-Easy-with-Rematch/tree/main/packages/chapter-4.

Let's start by introducing the Rematch library and learning how to install it in our to-do website.

Introducing the Rematch library

To introduce the Rematch library in our application, we'll be using the same method that we used previously in Chapter 3, Redux First Steps – Creating a Simple To-Do App, in the Creating our first store section. As we did then, we will be using unpkg.com. Let's modify the <script /> element under the closing body tag:

  <script src="https://unpkg.com/redux@latest"></script>
  <script src="https://unpkg.com/@rematch/core@latest"></  script>
  <script src="./todo-app.js"></script>
</body>
</html>

Rematch, like Redux, ships in a bundle with ES Modules (ESM), Common JS (CJS), and Universal Module Definition (UMD) builds. You can use Rematch anywhere where you can use Redux.

Rematch is less than 2 kilobytes in size, which means the impact on performance and the most important indicators for measuring that our...

Migrating a Redux store to Rematch init

Redux's most relevant method is the createStore() method, as you'll remember from Chapter 3, Redux First Steps – Creating a Simple To-Do App, in the Creating our first store section, and is responsible for initializing our store and passing any additional configuration:

const store = window.Redux.createStore(
  reducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_  DEVTOOLS_EXTENSION__()
);

createStore() doesn't exist in the Rematch library, being replaced instead by the init() function, which allows us to pass any Redux and Rematch configuration.

A best practice with Rematch is to think about the logic and split it inside models, but if our current application has too many reducers that can't be simplified or unified into single file models, it's a good practice to start with this simple step.

We're just using Rematch's init() function in...

Migrating Redux reducers to Rematch reducers

Rematch models contain a state property, a reducers property, and an effects property. We can use state to add the initial state, and inside reducers, we can move our Redux reducers directly to the reducers' model property:

const INITAL_STATE = {
  todos: []
}
function reducer(state = INITAL_STATE, action) {
  switch(action.type) {
    case "ADD_TODO": {
      const newTodo = {
        id: Date.now(),
        title: action.title,
        completed: false,
      }
      return {
        ...state,
        todos: [...state.todos, newTodo]
      }
    ...

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...

Summary

In this chapter, we learned the first steps of using Rematch and proved that Rematch reduces Redux complexity just by using pure functions and ES6 basic features. We also learned how to rename some methods, such as renaming createStore() to init(), and we covered migrating our Redux reducers from switch statements to Rematch reducers, which are easier to read and easier to maintain. We also migrated our dispatch actions from the dispatch({ }) Redux method to the Rematch shorthand.

In the next chapter, we will go deeper into a React and Rematch application with complex situations, such as listing products, creating a shopping cart, making calls to an external API, in summary, building a real-world web app with the best practices and performance.