Using models for sharing states and logic

In this section, we'll create models for sharing states and logic between components.

A model is a special custom React hook to centralize the states and logic for a specific context.

We must create the models' files inside the src/models folder, and we can access these models using the useModel custom hook, as follows:

const { currentUser } = useModel('user');

Here, the user namespace matches the model filename, so the model file must be named user.ts.

Let's create the customer model and the opportunity model to demonstrate the use of models. These two models will contain the logic and result for creating, reading, and updating operations and share these operations between different interfaces.

Follow these steps to create the models:

1. Create a new folder called models inside the src folder.
2. Next, create a new file named customer.ts under the models folder and add the following:

   import...