Pinia Crash Course #8 - Async Actions (part 1)

Summary

In this tutorial, the focus is on creating asynchronous actions to persist data in a task management application. It begins with setting up a local store and actions for state management but highlights the issue of data not being persisted upon page refresh. To solve this, the video shows how to integrate a local JSON file acting as a 'database' using JSON server. The asynchronous action fetches data from the file and updates the state. Additionally, the tutorial covers how to implement updates to the JSON data, ensuring that changes persist across page refreshes, completing the functionality for a dynamic, data-driven app.

Takeaways

• 😀 The initial setup of the store includes states, getters, and actions, but changes made to the state are not persisted after page refresh.
• 😀 Typically, in data-driven applications, data should be stored in a backend database, ensuring changes are saved even when the page is refreshed.
• 😀 The lesson demonstrates how to create asynchronous actions to fetch and update data from a JSON file, acting as a mock database.
• 😀 A JSON file (db.json) is created to store initial task data, which will be fetched and displayed in the application.
• 😀 To persist changes and fetch data, the script uses a package called JSON Server, which allows creating a local server with endpoints for interacting with the JSON file.
• 😀 The fetch API is used within the asynchronous 'getTasks' action to retrieve tasks from the mock database and update the application's state.
• 😀 An 'isLoading' property is introduced to track the loading state during the fetch request, ensuring the UI reflects the loading process.
• 😀 When tasks are fetched, the 'getTasks' action updates the tasks in the state, while also toggling the loading state.
• 😀 A loading message is displayed when the application is fetching tasks, and this message is controlled based on the loading state.
• 😀 The script also shows how to handle asynchronous updates to the JSON data (not just fetching it), ensuring that changes are saved and persist after page refresh.

Q & A

Why is the initial state data not persistent in the application?

The initial state data is not persistent because it is only stored in the front-end application. When the page is refreshed, the state is reset to its default, and any changes made are lost unless persisted in a backend or database.

What is the purpose of the JSON file (`db.json`) in this example?

The JSON file (`db.json`) acts as a mock database. It stores the initial task data and provides a way to simulate data persistence in a development environment without requiring a full backend setup.

What is the role of `json-server` in this setup?

`json-server` is a package that spins up a local server to serve the JSON file as a mock API. It creates endpoints that can be used to perform operations like fetching, adding, or updating data in the mock database.

How does the application initially load the task data from the JSON file?

The application uses an asynchronous action (`getTasks`) to fetch the task data from the `db.json` file. This is done via the `fetch` API, and the fetched data is used to update the state in the application.

What is the significance of the `loading` state in this example?

The `loading` state is used to track whether the application is currently fetching data. It helps manage the UI by showing a loading message while tasks are being retrieved, providing feedback to the user during the data fetch operation.

Why is it necessary to set the `loading` state to `true` when fetching tasks?

Setting the `loading` state to `true` signals that the data is being fetched asynchronously. This prevents the application from displaying incomplete or outdated information and ensures that the UI is updated to reflect the data loading process.

How does the `getTasks` action update the state once the data is fetched?

Once the data is fetched using the `fetch` API, the `getTasks` action updates the state by assigning the fetched tasks to the state variable. This allows the UI to render the new task data.

What happens if the page is refreshed during the data fetching process?

When the page is refreshed, the `loading` state temporarily shows the loading message, and the application makes a fresh request to fetch the data. This process ensures that any changes are reflected and the application remains consistent.

How can changes made to tasks be persisted across page refreshes?

To persist changes made to tasks, asynchronous actions should be implemented to update the `db.json` file whenever tasks are added, deleted, or modified. This ensures that the data remains up to date even after the page is refreshed.

What further steps are expected in the next lesson to improve the persistence of data?

In the next lesson, the focus will be on implementing additional asynchronous actions to modify the task data in the `db.json` file. This will include handling task creation, updating, and deletion, ensuring that changes persist across page refreshes.