Une brève discussion sur la méthode de gestion d'état de React+Storeon

Cet article vous présentera comment utiliser la gestion d'état basée sur les événements dans React. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Depuis l'introduction de Hook dans React, l'API Context et la bibliothèque Hook ont ​​été utilisées ensemble dans la gestion de l'état des applications. Mais combiner l'API Context avec des Hooks (sur lesquels sont construites de nombreuses bibliothèques de gestion d'état basées sur des Hooks) peut ne pas être efficace pour les applications à grande échelle.

Cela est fastidieux dans le développement réel puisqu'un Hook personnalisé doit être créé pour permettre l'accès à l'état et à ses méthodes avant de pouvoir être utilisé dans le composant. Cela va à l’encontre du véritable objectif de Hooks : la simplicité. Mais pour les petites applications, Redux peut sembler trop lourd.

Aujourd'hui, nous allons discuter d'une alternative à l'API Context : Storeon. Storeon est une petite bibliothèque de gestion d'état basée sur les événements pour React qui fonctionne de manière similaire à Redux. Utilisez Redux DevTools pour afficher et visualiser les opérations d'état. Storeon utilise en interne l'API Context pour gérer l'état et adopte une approche basée sur les événements pour les opérations d'état.

[Recommandations de didacticiel associées : Tutoriel vidéo React]

Store

le magasin correspond aux données stockées dans la collection d'état de l'application . Il est créé via la fonction createStoreon() importée de la bibliothèque Storeon. La fonction

createStoreon() accepte une liste de modules, où chaque module est une fonction qui accepte un paramètre store et lie son écouteur d'événement. Voici un exemple de magasin :

import { createStoreon } from 'storeon/react'
// todos module
const todos = store => {
  store.on(event, callback)
}

export default const store = createStoreon([todos])

Modulaire

Les magasins dans Storeon sont modulaires, c'est-à-dire qu'ils sont définis indépendamment et ne sont pas liés à un hook ou à un composant. . Chaque état et ses méthodes de fonctionnement sont définis dans des fonctions appelées modules. Ces modules sont transmis à la fonction createStoreon(), qui est ensuite enregistrée en tant que magasin global.

store dispose de trois méthodes :

• store.get() – utilisée pour récupérer les données actuelles dans l'état.

• store.on(event, callback) – utilisé pour enregistrer un écouteur d'événement sous le nom d'événement spécifié.

• store.dispatch(event, data) – utilisé pour émettre des événements et transmettre des données facultatives en fonction des exigences d'événement définies.

Événements

Storeon est une bibliothèque de gestion d'état basée sur les événements, et les changements d'état sont émis par les événements définis dans le module d'état. Il y a trois événements intégrés dans Storeon, ils commencent par @. Les autres événements sont définis sans le préfixe @. Les trois événements intégrés sont :

• @init – Cet événement est déclenché lors du chargement de l'application. Il est utilisé pour définir l'état initial de l'application et exécuter tout ce qui lui est transmis dans les rappels.

• @dispatch – Cet événement se déclenche à chaque nouvelle action. Ceci est utile pour le débogage.

• @changed – Cet événement est déclenché lorsque l'état de l'application change.

Remarque  : store.on(event，callback) est utilisé pour ajouter des écouteurs d'événements dans notre module.

Programme de démonstration

Pour démontrer comment effectuer des opérations sur l'état de l'application dans Storeon, nous allons créer un programme de notes simple. Un autre package de Storeon est également utilisé pour enregistrer les données d'état dans localStorage.

Supposons que vous ayez des connaissances de base en JavaScript et React. Vous pouvez trouver le code utilisé dans cet article sur https://github.com/Youngestde....

Configuration

Avant d'approfondir, décrivons la structure du projet et l'installation des dépendances requises par le programme Notes. Commencez par créer le dossier du projet.

mkdir storeon-app && cd storeon-app
mkdir {src,public,src/Components}
touch public/{index.html, style.css} && touch src/{index,store,Components/Notes}.js

Ensuite, initialisez le répertoire et installez les dépendances requises.

npm init -y
npm i react react-dom react-scripts storeon @storeon/localstorage uuidv4

L'étape suivante consiste à écrire le composant parent dans le fichier index.js.

index.js

Ce fichier est responsable du rendu de notre composant note. Importez d’abord les packages requis.

import React from 'react'
import { render } from 'react-dom';

function App() {
  return (
    <>
      Hello!
    </>
  );
}
const root = document.getElementById(&#39;root&#39;);
render(<App />, root);

Construisez ensuite le magasin en écrivant le code d'initialisation et de manipulation de l'état dans store.js.

store.js

Ce fichier est responsable de la gestion de l'état et des opérations de gestion de l'état ultérieures dans l'application. Nous devons créer un module pour stocker l'état et prendre en charge les événements afin de gérer les changements opérationnels.

Tout d'abord, importez la méthode createStoreon et l'UUID du générateur d'ID aléatoire unique depuis Storeon. La méthode

createStoreon est responsable de l'enregistrement de notre état dans le magasin global.

import { createStoreon } from 'storeon';
import { v4 as uuidv4 } from 'uuid'
import { persistState } from '@storeon/localstorage';

let note = store => {}

Nous stockons l'état dans un tableau de variables notes qui contient des commentaires au format suivant :

{
  id: 'note id',
  item: 'note item'
},

接下来，我们将用两个注释（在首次启动程序时会显示）来初始化状态，从而首先填充注释模块。然后，定义状态事件。

let note = store => {
  store.on('@init', () => ({
    notes: [
      { id: uuidv4(), item: 'Storeon is a React state management library and unlike other state management libraries that use Context, it utilizes an event-driven approach like Redux.' },
      { id: uuidv4(), item: 'This is a really short note. I have begun to study the basic concepts of technical writing and I'\'m optimistic about becoming one of the best technical writers.' },
    ]
  });
  store.on('addNote', ({ notes }, note) => {
    return {
      notes: [...notes, { id: uuidv4(), item: note }],
    }
  });
  store.on('deleteNote', ({ notes }, id) => ({
    notes: notes.filter(note => note.id !== id),
  });
}

在上面的代码中，我们定义了状态，并用两个简短的注释填充了状态，并定义了两个事件和一个从  dispatch(event, data)  函数发出事件后将会执行的回调函数。

在 addNote 事件中，我们返回添加了新 note 的更新后的状态对象，在 deleteNote 事件中把 ID 传递给调度方法的 note 过滤掉。

最后，把模块分配给可导出变量 store ，将其注册为全局 store，以便稍后将其导入到上下文 provider 中，并将状态存储在 localStorage 中。

const store = createStoreon([
  notes,
  // Store state in localStorage
  persistState(['notes']),
]);
export default store;

接下来，在 Notes.js 中编写 Notes 应用组件。

Notes.js

此文件包含 Notes 程序的组件。我们将从导入依赖项开始。

import React from 'react';
import { useStoreon } from 'storeon/react';

接下来，编写组件。

const Notes = () => {
  const { dispatch, notes } = useStoreon('notes');
  const [ value, setValue ] = React.useState(''); 
}

在上面的代码的第二行中，useStoreon()  hook 的返回值设置为可破坏的对象。 useStoreon() hook 使用模块名称作为其参数，并返回状态和调度方法以发出事件。

接下来定义在组件中发出状态定义事件的方法 。

const Notes = () => {
...
  const deleteNote = id => {
    dispatch('deleteNote', id)
  };
  const submit = () => {
    dispatch('addNote', value);
    setValue('');
  };
  const handleInput = e => {
    setValue(e.target.value);
  };
}

Let’s review the three methods we defined the above:
让我们回顾一下上面定义的三种方法：

• deleteNote(id) – 此方法在触发时调度 deleteNote 事件。

• submit() – 该方法通过传递输入状态的值来调度 addNote 事件，该状态在 Notes 组件中本地定义。

• handleInput() – 此方法将本地状态的值设置为用户输入。

Next, we’ll build the main interface of our app and export it.
接下来，我们将构建应用程序的主界面并将其导出。

const Notes = () => {
  ...
  return (
    <section>
      <header>Quick Notes</header>

      <div className=&#39;addNote&#39;>
        <textarea onChange={handleInput} value={value} />
        <button onClick={() => submit()}> Add A Note </button>
      </div>

      <ul>
        {notes.map(note => (
          <li key={note.id}>
            <div className=&#39;todo&#39;>
              <p>{note.item}</p>
              <button onClick={() => deleteNote(note.id)}>Delete note</button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

这样就构成了我们的 Notes 组件。接下来为我们的应用和 index.html 文件编写样式表。

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Storeon Todo App</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

接下来，填充我们的 style.css 文件。

style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 300px;
  margin: auto;
}

header {
  text-align: center;
  font-size: 24px;
  line-height: 40px;
}

ul {
  display: block;
}

.todo {
  display: block;
  margin: 12px 0;
  width: 300px;
  padding: 16px;
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.3);
  transition: 0.2s;
  word-break: break-word;
}

li {
  list-style-type: none;
  display: block;
}

textarea {
  border: 1px double;
  box-shadow: 1px 1px 1px #999;
  height: 100px;
  margin: 12px 0;
  width: 100%;
  padding: 5px 10px;
}

button {
  margin: 8px 0;
  border-radius: 5px;
  padding: 10px 25px;
}

.box:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

运行

现在我们已经成功编写了组件和样式表，但是还没有更新 index.js 中的父组件来渲染 Notes 组件。接下来让我们渲染 Notes 组件。

index.js

要访问我们的全局 store，必须导入 store 和 Storeon store 上下文组件。我们还将导入 notes 组件来进行渲染。

用以下代码替换组件的内容：

import React from 'react';
import { render } from 'react-dom';
import { StoreContext } from 'storeon/react';
import Notes from './Components/Notes';
import store from '../src/store';

function App() {
  return (
    <>
      <StoreContext.Provider value={store}>
        <Notes />
      </StoreContext.Provider>
    </>
  );
}

const root = document.getElementById(&#39;root&#39;);
render(<App />, root);

在第 8-10 行，调用 store 上下文提供程序组件，并将 notes 组件作为使用者传递。store 上下文提供程序组件将全局 store 作为其上下文值。

接下来把 package.json 文件中的脚本部分编辑为以下内容：

"scripts": {
  "start": "react-scripts start",
}

然后运行我们的程序：

npm run start

让我们继续添加和删除注释：

Storeon devtools

Storeon 与 Redux 有着相似的属性，可以在 Redux DevTools 中可视化和监视状态的更改。为了可视化 Storeon 程序中的状态，我们将导入 devtools 包，并将其作为参数添加到我们 store.js 文件的 createStoreon() 方法中。

...
import { storeonDevtools } from 'storeon/devtools';
...
const store = createStoreon([
  ...,
  process.env.NODE_ENV !== 'production' && storeonDevtools,
]);

这是用 Redux DevTools 可视化状态变化的演示：

结论

Storeon 是一个非常有用的状态管理库，它用事件驱动和 Redux 改编的模块化样式来管理状态。你可以在https://github.com/Youngestdev/storeon-app上找到本文中的代码。

原文地址：https://blog.logrocket.com/event-driven-state-management-in-react-using-storeon/

作者：Abdulazeez Abdulazeez Adeshina

更多编程相关知识，请访问：编程视频！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!