React中使用事件驅動進行狀態管理的方法

這篇文章給大家分享的是有關React中使用事件驅動進行狀態管理的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

自 Hook 被引入 React  以來，Context API 與 Hook 庫在應用狀態管理中被一起使用。但是把 Context API 和 Hooks（許多基于 Hooks 的狀態管理庫建立在其基礎上）組合的用法對于大規模應用來說可能效率不高。

由于必須創建一個自定義的 Hook 才能啟用對狀態及其方法的訪問，然后才能在組件中使用它，所以在實際開發中很繁瑣。這違反了 Hook 的真正目的：簡單。但是對于較小的應用，Redux 可能會顯得太重了。

今天我們將討論 Context API 的替代方法：Storeon。 Storeon 是一個微型的、事件驅動的 React 狀態管理庫，其原理類似于 Redux。用 Redux DevTools 可以查看并可視化狀態操作。 Storeon 內部使用 Context API 來管理狀態，并采用事件驅動的方法進行狀態操作。

Store

store 是在應用程序狀態下存儲的數據的集合。它是通過從 Storeon 庫導入的 createStoreon() 函數創建的。

createStoreon() 函數接受模塊列表，其中每個模塊都是一個接受 store 參數并綁定其事件監聽器的函數。這是一個store 的例子：

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

export default const store = createStoreon([todos])

模塊化

Storeon 中的 store 是模塊化的，也就是說，它們是獨立定義的，并且沒有被綁定到 Hook 或組件。每個狀態及其操作方法均在被稱為模塊的函數中定義。這些模塊被傳遞到 createStoreon() 函數中，然后將其注冊為全局 store。

store 有三種方法：

• store.get() – 用于檢索狀態中的當前數據。

• store.on(event, callback) – 用于把事件偵聽器注冊到指定的事件名稱。

• store.dispatch(event, data) – 用于發出事件，并根據定義的事件要求將可選數據傳遞進來。

Events

Storeon 是基于事件的狀態管理庫，狀態更改由狀態模塊中定義的事件發出。 Storeon 中有三個內置事件，它們以 @ 開頭。其他事件不帶 @ 前綴定義。三個內置事件是：

• @init – 在應用加載時觸發此事件。它用于設置應用的初始狀態，并執行傳遞給它的回調中的所有內容。

• @dispatch – 此事件在每個新動作上觸發。這對于調試很有用。

• @changed – 當應用狀態發生更改時，將觸發此事件。

注意：store.on(event，callback) 用于在我們的模塊中添加事件監聽器。

演示程序

為了演示在 Storeon 中如何執行應用程序狀態操作，我們將構建一個簡單的 notes 程序。還會用 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('root');
render(<App />, root);

接下來通過在 store.js 中編寫用于狀態的初始化和操作的代碼來構建 store。

store.js

此文件負責處理應用中的狀態和后續狀態管理操作。我們必須創建一個模塊來存儲狀態以及支持事件，以處理操作變更。

首先，從 Storeon 導入 createStoreon 方法和唯一隨機ID生成器 UUID。

createStoreon 方法負責將我們的 狀態 注冊到全局 store 。

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='addNote'>
        <textarea onChange={handleInput} value={value} />
        <button onClick={() => submit()}> Add A Note </button>
      </div>

      <ul>
        {notes.map(note => (
          <li key={note.id}>
            <div className='todo'>
              <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('root');
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 可視化狀態變化的演示：

感謝各位的閱讀！關于“React中使用事件驅動進行狀態管理的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！