在前端开发中，状态管理是一个重要的概念，而 Redux 已成为一种被广泛接受的状态管理方案。但是，使用 Redux 时需要编写大量的模板代码，并且使用 TypeScript 时，类型检查也会变得十分繁琐。为了解决这个问题，我们可以使用 npm 包 typed-redux-actions-reducer。
typed-redux-actions-reducer 是一个使用 TypeScript 编写的 Redux reducer 库，它将编写 Redux reducer 的过程变得简单而直观，同时还提供了自动类型检查的支持。在这篇文章中，我将为大家提供 typed-redux-actions-reducer 的使用教程，以帮助大家更好地使用这个 npm 包，提高 Redux 应用的开发效率和质量。
安装
首先，我们需要使用 npm 安装 typed-redux-actions-reducer：
npm install typed-redux-actions-reducer
然后，我们需要在 Redux 中使用这个 npm 包，将其引入到我们的项目中。在使用 typed-redux-actions-reducer 之前，我们需要为 Redux 创建一个 store，这个 store 需要接收一个 reducer 函数作为参数。我们可以通过下面的代码来创建一个使用 typed-redux-actions-reducer 的 Redux store：
-- -------------------- ---- -------
------ - ------------- - ---- ------------------------------
------ - ----------- - ---- --------
--------- ----- -
-------- -------
-
---- ---------------- - - ------ ------ --
----- ------------- ----- - -
-------- --
--
----- ------- - -----------------------------
---------- ------- - ----- -- ----------------- -- --
---------
-------- ------------- - ------
---
---
----- ----- - ---------------------这个例子中，我们首先定义了一个 state 类型，表示我们 Redux store 中的 state。然后，我们定义了一个 IncrementPayload 类型，表示我们的 action 中可能出现的数量增加的值。接着，我们创建了一个初始状态 initialState。最后，我们使用 createReducer 函数来创建一个 reducer，这个 reducer 中包含了一个 INCREMENT action，这个 action 可以通过传入一个包含 value 属性的 IncrementPayload 对象来触发，从而将 counter 属性增加一个指定的值。最后，我们将这个 reducer 传入 createStore 函数中，得到一个可用的 store。
使用
现在，我们已经成功地创建了一个使用 typed-redux-actions-reducer 的 Redux store。接下来，我们需要向这个 store 中添加一些 action，以便我们可以操作 Redux store 中的 state。我们可以使用 createAction 函数来创建 action，这个函数接收一个字符串类型的 action type，和一个返回 payload 的函数作为参数。下面是一个例子：
import { createAction } from "typed-redux-actions-reducer";
export const incrementAction = createAction("INCREMENT", (value: number) => ({ value }));在这个例子中，我们创建了一个名为 "INCREMENT" 的 action，并将一个返回包含 value 属性的对象的函数作为 payload 函数。这个函数将接收一个 value 值，然后将其封装为一个包含 value 属性的对象并返回。
现在我们已经创建了 "INCREMENT" 的 action，我们可以将这个 action 传入 Redux store 的 dispatch 函数中，从而触发 Redux store 的 state 变化：
store.dispatch(incrementAction(1));
在这个例子中，我们将 incrementAction 函数传入了 Redux store 的 dispatch 函数中，传入的值为 1。这个操作将触发 Redux store 中的 counter 属性增加 1 的操作。
总结
typed-redux-actions-reducer 是一个简化 Redux reducer 编写过程的 npm 包，它将比较繁琐的 Redux reducer 编写过程变得直观和简单。通过使用 typed-redux-actions-reducer，我们可以在 TypeScript 项目中轻松使用 Redux，并且不必担心类型检查的问题。在使用 typed-redux-actions-reducer 时，我们首先需要安装这个 npm 包，然后为 Redux store 创建一个 reducer 函数。接着，我们可以使用 createAction 函数来创建 action 并触发 Redux store 中的 state 变化。
示例代码
-- -------------------- ---- -------
------ - ------------- - ---- ------------------------------
------ - ------------ - ---- ------------------------------
------ - ----------- - ---- --------
--------- ----- -
-------- -------
-
---- ---------------- - - ------ ------ --
----- ------------- ----- - -
-------- --
--
----- --------------- - ------------------------- ------- ------- -- -- ----- ----
----- ------- - -----------------------------
---------- ------- - ----- -- ----------------- -- --
---------
-------- ------------- - ------
---
---
----- ----- - ---------------------
-----------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672673660cf7123b365b2