跟大家讲解下有关浅谈React+Storeon进行状态管理的方法，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说浅谈React+Storeon进行状态管理的方法，小编也收集到了有关浅谈React+Storeon进行状态管理的方法的相关资料，希望大家看到了会喜欢 。
本篇文章给大家介绍一下React中使用事件驱动进行状态管理的方法 。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助 。
自 Hook 被引入 React 以来，Context API 与 Hook 库在应用状态管理中被一起使用 。但是把 Context API 和 Hooks（许多基于 Hooks 的状态管理库建立在其基础上）组合的用法对于大规模应用来说可能效率不高 。
由于必须创建一个自定义的 Hook 才能启用对状态及其方法的访问，然后才能在组件中使用它，所以在实际开发中很繁琐 。这违反了 Hook 的真正目的：简单 。但是对于较小的应用，Redux 可能会显得太重了 。
今天我们将讨论 Context API 的替代方法：Storeon 。Storeon 是一个微型的、事件驱动的 React 状态管理库，其原理类似于 Redux 。用 Redux DevTools 可以查看并可视化状态操作 。Storeon 内部使用 Context API 来管理状态，并采用事件驱动的方法进行状态操作 。
【相关教程推荐：React视频教程】
Storestore 是在应用程序状态下存储的数据的集合 。它是通过从 Storeon 库导入的 createStoreon()函数创建的 。
createStoreon()函数接受模块列表，其中每个模块都是一个接受store 参数并绑定其事件监听器的函数 。这是一个store 的例子：
import { createStoreon } from 'storeon/react'// todos moduleconst 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) – 用于发出事件，并根据定义的事件要求将可选数据传递进来 。
  

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

• @init – 在应用加载时触发此事件 。它用于设置应用的初始状态，并执行传递给它的回调中的所有内容 。
  
• @dispatch – 此事件在每个新动作上触发 。这对于调试很有用 。
  
• @changed – 当应用状态发生更改时，将触发此事件 。
  

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

演示程序为了演示在 Storeon 中如何执行应用程序状态操作，我们将构建一个简单的 notes 程序 。还会用 Storeon 的另一个软件包把状态数据保存在 localStorage中 。
假设你具有 JavaScript 和 React 的基本知识 。你可以在 https://github.com/Youngestde... 上找到本文中使用的代码 。
设置在深入探讨之前，让我们先勾勒出 Notes 程序所需的项目结构和依赖项的安装 。从创建项目文件夹开始 。
mkdir storeon-app && cd storeon-appmkdir {src,public,src/Components}touch public/{index.html, style.css} && touch src/{index,store,Components/Notes}.js接下来，初始化目录并安装所需的依赖项 。
npm init -ynpm 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:
让我们回顾一下上面定义的三种方法：

• 【互联网常识：浅谈React+Storeon进行状态管理的方法】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=https://wen.zhangchenghui.com/{value} /> submit()}> Add A Note