千家信息网

请输入关键字词

热门搜索排行

最新搜索排行

导航： 首页 > 开发技术 >

怎么在React中进行事件驱动的状态管理

发表于：2025-01-26 作者：千家信息网编辑
千家信息网最后更新 2025年01月26日，本篇内容主要讲解"怎么在React中进行事件驱动的状态管理"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"怎么在React中进行事件驱动的状态管理"吧!St
千家信息网最后更新 2025年01月26日怎么在React中进行事件驱动的状态管理

本篇内容主要讲解"怎么在React中进行事件驱动的状态管理"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"怎么在React中进行事件驱动的状态管理"吧!

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 有三种方法：

  1. store.get() – 用于检索状态中的当前数据。

  2. store.on(event, callback) – 用于把事件侦听器注册到指定的事件名称。

  3. store.dispatch(event, data) – 用于发出事件，并根据定义的事件要求将可选数据传递进来。

Events

Storeon 是基于事件的状态管理库，状态更改由状态模块中定义的事件发出。Storeon 中有三个内置事件，它们以 @ 开头。其他事件不带 @ 前缀定义。三个内置事件是：

  1. @init – 在应用加载时触发此事件。它用于设置应用的初始状态，并执行传递给它的回调中的所有内容。

  2. @dispatch – 此事件在每个新动作上触发。这对于调试很有用。

  3. @changed – 当应用状态发生更改时，将触发此事件。

注意：store.on(event，callback) 用于在我们的模块中添加事件监听器。

演示程序

为了演示在 Storeon 中如何执行应用程序状态操作，我们将构建一个简单的 notes 程序。还会用 Storeon 的另一个软件包把状态数据保存在 localStorage 中。

假设你具有 JavaScript 和 React 的基本知识。你可以在https://github.com/Youngestdev/storeon-app 上找到本文中使用的代码。

设置

在深入探讨之前，让我们先勾勒出 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(, 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) => ({  });16}

在上面的代码中，我们定义了状态，并用两个简短的注释填充了状态，并定义了两个事件和一个从 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);  };}

让我们回顾一下上面定义的三种方法：

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

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

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

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

const Notes = () => {   ...  return (   
       
Quick Notes