前言
在前端开发中，数据是一个非常重要的概念。在 React 应用中，管理组件状态的常用工具是 Redux。但是，使用 Redux 又需要编写大量的 reducer，拆分 state 以及使用 connect 连接组件等等，这给开发带来了不小的负担。随着技术的不断进步，新的数据管理工具不断出现。Redux Cursor 是一款基于 Redux 的轻量级数据管理工具，本文将介绍其使用方法和如何在项目中使用它。
Redux Cursor 简介
Redux Cursor 是一款基于 Redux 的数据管理工具，它提供了一种新的组织代码的方式，能够增加代码的可读性和可维护性。使用 Redux Cursor，我们可以更加直观地操作数据，而且不需要编写大量的 reducer 和 action。
安装
使用 npm 安装：
npm install --save redux-cursor
使用方法
初始化
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - -------------- ---------- - ---- --------------- ----- ----------- - ------ - --- ------- -- - -- ----- ------ ---- ---- ------- -- ----- ------------ - - -- ----- ------ ---- ------- ----- -- ----- ----- - --------------------------------------- -------------- ----- ------ - ------------------
创建 Cursor
Redux Cursor 中的 Cursor 是一个提供了读写数据操作的对象。使用 initCursor 后，我们可以通过 cursor(path) 方法创建一个 Cursor。
const cursor1 = cursor(['path1', 'path2']);
const cursor2 = cursor('path1', 'path2');创建 Cursor 后，我们就可以通过读写操作来修改数据了。
读取数据
读取数据的方法有两种：get() 和 deref()。
get()
get() 方法用来同步地获取数据。它会立即返回数据的值，如果数据还没有准备好，则会返回 undefined。
console.log(cursor1.get()); // 返回 path1.path2 路径上的数据 console.log(cursor2.get()); // 返回 path1.path2 路径上的数据
deref()
deref() 方法用来异步地获取数据。它会返回一个 Promise，当数据准备好时再返回它的值。
cursor1.deref().then((value) => {
console.log(value); // 返回 path1.path2 路径上的数据
});
cursor2.deref().then((value) => {
console.log(value); // 返回 path1.path2 路径上的数据
});修改数据
修改数据也有两种方法：update() 和 transact()。
update()
update() 方法用来同步地修改数据。它可以接受一个函数或一个值。
const newValue = 123;
cursor1.update(newValue);
cursor2.update((value) => {
return newValue;
});transact()
transact() 方法用来异步地修改数据。它接受一个函数作为参数，该函数接受一个参数 mutator，用来修改数据。
-- -------------------- ---- -------
----- -------- - ----
-------------------------- -- -
----------------------
---
-------------------------- -- -
---------------------- -- -
------ ---------
---
---状态更新事件
当数据发生变化后，Redux Cursor 会触发一个 cursor:change 事件。
cursor1.on('cursor:change', (newValue, oldValue) => {
console.log(newValue, oldValue);
});
cursor2.on('cursor:change', (newValue, oldValue) => {
console.log(newValue, oldValue);
});实例
下面我们将使用 Redux Cursor 来实现一个 ToDoList 应用。
应用状态
-- -------------------- ---- -------
-
------ -
-
--- --
----- --------
----- -----
--
-
--- --
----- --------
----- -----
-
-
-初始化
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------------- ---------- - ---- ---------------
----- ----------- - ------ - --- ------- -- -
-- ------------ --- ---------- -
----- - ---- - - ---------------
----- ---- - -
--- -----------
-----
----- ------
--
------ -
------ ---------------- ------
--
-
-- ------------ --- ------------- -
----- - -- - - ---------------
----- --------- - ---------------------------- -- ------- --- ----
----- ------- - -
--------------------------
----- -----------------------------
--
----- -------- - -----------------
------------------- - --------
------ -
------ ---------
--
-
------ ------
--
----- ------------ - -
------ ---
--
----- ----- - --------------------------------------- --------------
----- ------ - ------------------渲染
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- ---------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
--------- ---
--
-
--------- -
----- -------- - ---------------------------
-- ---------- -
----------------------------------------------- -- -
------------------ ----- ---------- -------- - ----- -------- - ---
---
--------------- --------- -- ---
-
-
---------------- -
--------------------------- - --- ------- ---------------------- -- -
------------------ ----- ------------- -------- - --- ------- - ---
---
-
-------- -
----- ----- - ---------------------------------- -- ---
------ -
-----
------
-----------
---------------------------
----------------- -- -
--------------- --------- ------------------ ---
--
--
------- ----------- -- ----------------------------
----
----------------- -- -
---
-------------
-------- --------------- --------- - -------------- - ------ --
----------- -- ----------------------
-
-----------
-----
---
-----
------
--
-
-
----- ---------- - -----------------
----------------
---- ------------------- ---
-------------------------------
--总结
本文介绍了 Redux Cursor 的基本使用方法，并使用一个简单的示例来展示了它的基本使用。Redux Cursor 为我们提供了一种更加直观的数据操作方式，减少了 reducer 和 action 的编写，提高了代码的可读性和可维护性。使用 Redux Cursor，我们可以更加高效地开发出优秀的 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ade