介绍
在前端开发中，我们经常需要处理数据的增删改查和状态管理。因此，许多框架和库都提供了一些快捷的方法来处理这些常见的操作。而 npm 包 generic-slice 就是其中之一，它提供了一种简单的方式来创建 Redux reducers 和 selectors，使得我们可以更方便地管理数据和状态。
安装
我们可以使用 npm 来安装 generic-slice：
npm install generic-slice
使用方法
首先，我们需要引入 generic-slice：
import createSlice from 'generic-slice';
创建 slice
-- -------------------- ---- -------
----- ------- - -------------
----- ------------
------------- -
------ ---
----------- -----
--
--------- -
-------- ------- ------- -- -
---------------------------------
--
----------- ------- ------- -- -
----- ----- - -------------------------- -- ------- --- ----------------
-- ------ - --- -
------------------------- ---
-
--
----------- ------- ------- -- -
---------------- - ---------------
--
--
---这里我们创建了一个名为 myReducer 的 reducer，初始状态包含了一个 items 数组和一个 selectedId 属性。然后我们定义了三个 reducers：addItem，deleteItem 和 selectItem。这些 reducers 分别用于添加、删除和选择 items 数组中的元素。
创建 selectors
接下来，我们可以使用 createSelectors 方法来创建 selectors：
const { selectAll, selectById } = mySlice.createSelectors(state => state.myReducer);通过传入一个回调函数来访问 Redux store 中的状态。selectAll selector 返回所有 items 元素的数组，selectById selector 用于根据 id 查找 items 数组中的元素。
使用 reducers 和 selectors
然后我们就可以在我们的代码中使用这些 reducers 和 selectors 了：
dispatch(mySlice.actions.addItem({ id: 1, name: 'Bob' }));
dispatch(mySlice.actions.addItem({ id: 2, name: 'Alice' }));
const items = selectAll(store.getState());
console.log(items); // [{ id: 1, name: 'Bob' }, { id: 2, name: 'Alice' }]
const selectedId = selectById(store.getState(), 1);
console.log(selectedId); // { id: 1, name: 'Bob' }我们可以使用 dispatch 函数来分发一个添加元素的 action，这样我们就可以在 store 中添加元素了。然后我们可以使用 selectAll selector 来获取所有的 items，使用 selectById selector 来根据 id 来获取一个特定的元素。
示例代码
下面是一个完整的使用 generic-slice 的示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ----------- ---- ----------------
----- ------- - -------------
----- ------------
------------- -
------ ---
----------- -----
--
--------- -
-------- ------- ------- -- -
---------------------------------
--
----------- ------- ------- -- -
----- ----- - -------------------------- -- ------- --- ----------------
-- ------ - --- -
------------------------- ---
-
--
----------- ------- ------- -- -
---------------- - ---------------
--
--
---
----- - ---------- ---------- - - ----------------------------- -- -----------------
----- ----- - -----------------------------
---------------------------------------- --- -- ----- ----- ----
---------------------------------------- --- -- ----- ------- ----
----- ----- - ----------------------------
------------------- -- -- --- -- ----- ----- -- - --- -- ----- ------- --
----- ---------- - ---------------------------- ---
------------------------ -- - --- -- ----- ----- -结论
generic-slice 是一个非常有用的工具，可以帮助我们更轻松地管理 Redux store 中的数据和状态。在处理常见的操作时，它可以减少我们的代码量并提高代码的可读性和可维护性。如果您正在开发一个 Redux 应用程序，我强烈推荐您尝试使用 generic-slice。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef2a33b8c4ce90ee4ca3b58