React+Storeonの状態管理手法についての簡単な説明

この記事では、React でイベント駆動型の状態管理を使用する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

フックが React に導入されて以来、アプリケーションの状態管理では Context API と Hook ライブラリが一緒に使用されてきました。ただし、Context API とフック (フックベースの状態管理ライブラリの多くが構築されている) を組み合わせるのは、大規模なアプリケーションでは効率的ではない可能性があります。

コンポーネントで使用する前に、状態とそのメソッドにアクセスできるようにカスタム フックを作成する必要があるため、実際の開発では面倒です。これでは、フックの本当の目的である単純さが損なわれます。しかし、小規模なアプリケーションの場合、Redux は重すぎるように思えるかもしれません。

今日は、Context API の代替手段である Storeon について説明します。 Storeon は、Redux と同様に機能する、React 用の小さなイベント駆動型の状態管理ライブラリです。 Redux DevTools を使用して、状態の操作を表示および視覚化します。 Storeon は内部で Context API を使用して状態を管理し、状態操作にイベント駆動型のアプローチを採用しています。

[関連チュートリアルの推奨事項: React ビデオ チュートリアル ]

Store

store は、アプリケーション状態コレクションに保存されているデータです。 。これは、Storeon ライブラリからインポートされた createStoreon() 関数を通じて作成されます。

createStoreon() 関数はモジュールのリストを受け取ります。各モジュールは、store パラメーターを受け取り、そのイベント リスナーをバインドする関数です。ストアの例を次に示します。

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

export default const store = createStoreon([todos])

モジュール性

Storeon のストアはモジュール式です。つまり、独立して定義され、フックやフックにバインドされません。成分。各状態とその動作方法はモジュールと呼ばれる関数で定義されます。これらのモジュールは createStoreon() 関数に渡され、グローバル ストアとして登録されます。

store には 3 つのメソッドがあります:

• store.get() – 状態内の現在のデータを取得するために使用されます。

• store.on(event, callback) – 指定されたイベント名にイベント リスナーを登録するために使用されます。

• store.dispatch(event, data) – イベントを発行し、定義されたイベント要件に基づいてオプションのデータを渡すために使用されます。

Events

Storeon はイベントベースの状態管理ライブラリであり、状態の変更は状態モジュールで定義されたイベントによって発行されます。 Storeon には 3 つの組み込みイベントがあり、@ で始まります。他のイベントは、@ プレフィックスなしで定義されます。 3 つの組み込みイベントは次のとおりです。

• @init – このイベントは、アプリの読み込み時に発生します。これは、アプリの初期状態を設定し、渡されたコールバック内のあらゆるものを実行するために使用されます。

• @dispatch – このイベントは、新しいアクションが発生するたびに発生します。これはデバッグに役立ちます。

• @changed – このイベントは、アプリケーションの状態が変化したときに発生します。

注: store.on(event, callback) は、モジュールにイベント リスナーを追加するために使用されます。

デモ プログラム

Storeon でアプリケーションの状態操作を実行する方法をデモンストレーションするために、簡単なメモ プログラムを構築します。 Storeon の別のパッケージも状態データを localStorage に保存するために使用されます。

JavaScript と React の基本的な知識があることを前提としています。この記事で使用されているコードは、https://github.com/Youngestde... で見つけることができます。

セットアップ

本題に入る前に、プロジェクトの構造と、Notes プログラムに必要な依存関係のインストールについて概要を説明します。まずはプロジェクトフォルダーを作成します。

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

次に、ディレクトリを初期化し、必要な依存関係をインストールします。

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

次のステップでは、親コンポーネントを index.js ファイルに書き込みます。

index.js

このファイルは、メモ コンポーネントのレンダリングを担当します。まず必要なパッケージをインポートします。

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

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

次に、初期化と状態の操作のためのコードを store.js に記述してストアを構築します。

store.js

このファイルは、アプリケーション内の状態とその後の状態管理操作を処理します。状態を保存し、操作上の変更を処理するイベントをサポートするモジュールを作成する必要があります。

まず、createStoreon メソッドと一意のランダム ID ジェネレーター UUID を Storeon からインポートします。

createStoreon メソッドは、状態をグローバル ストアに登録する役割を果たします。

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

let note = store => {}

ステータスを配列変数 notes に保存します。この配列変数には、次の形式のメモが含まれます:

{
  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

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

以上がReact+Storeonの状態管理手法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。