react 生命挂钩_秋田+ React挂钩=耸人听闻的国家管理食谱-CSDN博客

react 生命挂钩

I’ve been working with Akita pretty much since its inception, and while I’ve created many, many Akita stores in Angular, and wrote about it extensively, and even played around with an Akita/Svelte combo, I had yet to use it myself in a React App. I’ve decided to check that box, and whip up a classic todo app in React, using Akita for state management. Let’s get cooking 👩‍🍳👨‍🍳

我一直在与秋田几乎自成立以来，虽然我在角创造了许多，许多秋田店，并写了关于它广泛，甚至有发挥各地秋田/Card.svelte组合，我还没有使用它我自己在React App中。我决定选中该框，并使用Akita进行状态管理，在React中启动一个经典的Todo应用程序。让我们去做饭👩‍🍳👨‍🍳

This article assumes some familiarity with Akita State Management. To learn more about Akita and all its capabilities, check out one of the articles I’ve listed above or its great documentation.

本文假定您对秋田县州立管理系统有所了解。要了解有关秋田及其所有功能的更多信息，请查看我上面列出的文章之一或其出色的文档。

入门-我们要保存什么，我们要保存在哪里？ (Getting Started — What Do We Want to Save, and Where Do We Want to Save It?)

We start by creating the model for the entity we want to save, in this case a ToDo item:

我们首先为要保存的实体创建模型，在本例中为ToDo项目：

This includes the model itself, as well as a function to generate new ToDo items. Note that the guid() method is our first little morsel from Akita 😋

这包括模型本身，以及生成新的ToDo的功能。请注意， guid()方法是秋田😋的第一个小建议

We also add a VISIBILITY_FILTER filters enum, which we’ll use later to filter the display of the items.

我们还添加了VISIBILITY_FILTER过滤器枚举，稍后将使用它来过滤项目的显示。

Next up is adding an Akita EntityStore:

接下来是添加一个Akita EntityStore ：

The store is used to hold our ToDo items (the state), as well as the currently selected VISIBILITY_FILTER (aka the UI state). To read more about managing UI state with Akita check out this article. As you can see, very little code is needed at this stage — this is part of the charm of Akita, it saves a ton of boilerplate 💪

该商店用于保存我们的待办事项(状态)以及当前选择的VISIBILITY_FILTER (又称UI状态)。要了解有关使用Akita管理UI状态的更多信息，请查看本文。如您所见，在此阶段几乎不需要任何代码-这是秋田的魅力所在，它节省了大量的样板内容💪

Every Akita entity store comes with a set pair of EntityQuery (for reading data from the store) and EntityService (for modifying the store). Let’s add the query first:

每个Akita实体商店都附带一对EntityQuery(用于从商店读取数据)和EntityService(用于修改商店)。让我们先添加查询：

Once again, Akita’s EntityQuery provides us with any basic selection functions we need (check the docs for more on that). All we need to add is a function that returns the currently selected VISIBILITY_FILTER, and one that returns the ToDo items, filtered by it. Let’s move on the service:

再次，秋田的EntityQuery为我们提供了我们需要的任何基本选择功能(有关更多信息，请参阅文档 )。我们需要添加的只是一个函数，该函数返回当前选定的VISIBILITY_FILTER ，并返回一个由其过滤的ToDo项目。让我们继续这项服务：

The service is also pretty lean — the basic CRUD operations are already supplied by the EntityStore, all we need to do is call them.

该服务也非常精简EntityStore已经提供了基本的CRUD操作，我们所需要做的就是调用它们。

秘密酱料：useObservable (The Secret Sauce: useObservable)

Starting from v.16.8.0, React provides us with a bunch of hooks that let us interact with the lifecycle directly. You can read more about React Hooks here.

从v.16.8.0开始，React为我们提供了许多挂钩，使我们可以直接与生命周期进行交互。您可以在这里阅读更多有关React Hooks的信息。

I’ll import useObservable, which uses those hooks (specifically, useRef, useState, and useEffect) and a given Observable, to update a React state with its emitted values. You can read more about useObservable here.

我将导入useObservable，它使用这些钩子(特别是useRef，useState和useEffect)和给定的Observable来使用其发出的值更新React状态。您可以在此处阅读有关useObservable的更多信息。

Using that, with the query’s selectVisibleTodos$ method as input, gives us the last piece of the puzzle:

使用查询的selectVisibleTodos$方法作为输入，这为我们提供了最后的难题：

And voilà! That’s all the ingredients we need for an efficient, DRY todo app!

和瞧！这就是我们有效的DRY todo应用程序所需要的全部要素！