介绍
@ailurus/ts-redux 是一个用于 TypeScript 和 Redux 的库，提供了一个简单且类型安全的方式来创建 Redux Store。它的设计受到了 Redux Toolkit 的启发，但它在类型安全性和灵活性方面取得了人性化的平衡。
安装
使用 npm 或 yarn 安装 @ailurus/ts-redux。
--- ------- -----------------
或者
---- --- -----------------
创建 Store
首先，你需要创建一个文件来保存你的 store。在这个文件中，你需要导入 @ailurus/ts-redux 中的 StoreBuilder 类。
------ - ------------ - ---- --------------------
然后，你可以创建一个 StoreBuilder 的实例并传入一个 reducer 函数，以及一个可选的 initialState。
----- ------------ - --- --------------------- --------------
最后，你可以使用 build() 方法来创建一个 store 并运行它。
----- ----- - ---------------------
Actions
@ailurus/ts-redux 鼓励你创建一个 actions 对象来管理你的 actions。你可以使用 createAction 方法来创建一个 action。
------ - ------------ - ---- -------------------- ----- --------- - ---------------------------------- ----- --------- - ----------------------------------
这里，我们创建了两个 actions：increment 和 decrement。我们可以在任何位置调用这些 actions。
------------------------------ -- - ----- ------------ -------- -- - ----------------------------- -- - ----- ------------ -------- - -
Reducers
Reducers 是用于处理 actions 的函数。你可以使用 createReducer 方法来创建一个 reducer。
------ - ------------- - ---- --------------------
---- ------------ - -
------ -------
--
----- ------------- ------------ - -
------ --
--
----- -------------- - --------------------------- --------- -- -
-------------------------- ------- ------- -- -
----------- -- ---------------
---
-------------------------- ------- ------- -- -
----------- -- ---------------
---
---这里，我们创建了一个名为 counterReducer 的 reducer，并为它添加了两个 case：increment 和 decrement。每个 case 接收一个 state 和一个 action。在 case 函数中，我们可以根据 action 的类型来更新 state。
Selector
Selectors 可以让你从 store 中选择您所需要的一部分数据。你可以使用 createSelector 方法来创建一个 selector。
------ - -------------- - ---- -------------------- ----- --------------- - ---------------------- ------------- -- ------------- ----------------------------------------------- -- -
这里，我们创建了一个名为 getCounterValue 的 selector，它会返回 state 中的 value 属性。您可以调用 selector 函数并传入 store 的当前 state，以获取您需要的数据。
订阅
你可以使用 subscribe() 方法来监听 store 中 state 的变化。
------------------ -- - ------------------------------ --- ------------------------------ -- - ------ -- - ----------------------------- -- - ------ - -
这里，我们创建了一个简单的日志，并使用 subscribe() 方法在每次 state 更新时进行更新。
结论
@ailurus/ts-redux 提供了一个简单且类型安全的方式来创建 Redux Store。你可以使用它来创建一个清晰、易于维护的代码库。希望这篇教程对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fe981e8991b448dd936