npm 包 @ailurus/ts-redux 使用教程

介绍

@ailurus/ts-redux 是一个用于 TypeScript 和 Redux 的库，提供了一个简单且类型安全的方式来创建 Redux Store。它的设计受到了 Redux Toolkit 的启发，但它在类型安全性和灵活性方面取得了人性化的平衡。

安装

使用 npm 或 yarn 安装 @ailurus/ts-redux。

npm install @ailurus/ts-redux

或者

yarn add @ailurus/ts-redux

创建 Store

首先，你需要创建一个文件来保存你的 store。在这个文件中，你需要导入 @ailurus/ts-redux 中的 StoreBuilder 类。

import { StoreBuilder } from '@ailurus/ts-redux';

然后，你可以创建一个 StoreBuilder 的实例并传入一个 reducer 函数，以及一个可选的 initialState。

const storeBuilder = new StoreBuilder(reducer, initialState);

最后，你可以使用 build() 方法来创建一个 store 并运行它。

const store = storeBuilder.build();

Actions

@ailurus/ts-redux 鼓励你创建一个 actions 对象来管理你的 actions。你可以使用 createAction 方法来创建一个 action。

import { createAction } from '@ailurus/ts-redux';

const increment = createAction<number>('INCREMENT');
const decrement = createAction<number>('DECREMENT');

这里，我们创建了两个 actions：increment 和 decrement。我们可以在任何位置调用这些 actions。

store.dispatch(increment(10)); // { type: 'INCREMENT', payload: 10 }
store.dispatch(decrement(5)); // { type: 'DECREMENT', payload: 5 }

Reducers

Reducers 是用于处理 actions 的函数。你可以使用 createReducer 方法来创建一个 reducer。

-- -------------------- ---- -------
------ - ------------- - ---- --------------------

---- ------------ - -
  ------ -------
--

----- ------------- ------------ - -
  ------ --
--

----- -------------- - --------------------------- --------- -- -
  -------------------------- ------- ------- -- -
    ----------- -- ---------------
  ---

  -------------------------- ------- ------- -- -
    ----------- -- ---------------
  ---
---

这里，我们创建了一个名为 counterReducer 的 reducer，并为它添加了两个 case：increment 和 decrement。每个 case 接收一个 state 和一个 action。在 case 函数中，我们可以根据 action 的类型来更新 state。

Selector

Selectors 可以让你从 store 中选择您所需要的一部分数据。你可以使用 createSelector 方法来创建一个 selector。

import { createSelector } from '@ailurus/ts-redux';

const getCounterValue = createSelector((state: CounterState) => state.value);

console.log(getCounterValue(store.getState())); // 0

这里，我们创建了一个名为 getCounterValue 的 selector，它会返回 state 中的 value 属性。您可以调用 selector 函数并传入 store 的当前 state，以获取您需要的数据。

订阅

你可以使用 subscribe() 方法来监听 store 中 state 的变化。

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch(increment(10)); // { value: 10 }
store.dispatch(decrement(5)); // { value: 5 }

这里，我们创建了一个简单的日志，并使用 subscribe() 方法在每次 state 更新时进行更新。

结论

@ailurus/ts-redux 提供了一个简单且类型安全的方式来创建 Redux Store。你可以使用它来创建一个清晰、易于维护的代码库。希望这篇教程对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe981e8991b448dd936