npm 包 @types/redux-actions 使用教程-JavaScript中文网-JavaScript教程资源分享门户

如果你曾经在开发 React 后端应用或在前端应用中使用过 Redux，那么你可能知道 Redux-Actions 库，在开发过程中，我们通常需要定义一些不可变 Action 类型和 Action 创建方法来实现对应的 Dispatch，而 Redux-Actions 包提供了一种更为便捷的方式来创建和处理 Redux actions。

在使用 Redux-Actions 库时，为保证代码的可靠性和类型安全性，我们通常会使用与之对应的 Typescript 类型声明库 @types/redux-actions。本文将详细介绍如何使用 @types/redux-actions 库以及配合 Redux-Actions 库将前端 Redux 应用的开发效率提升到一个新的高度。

安装

要使用 @types/redux-actions 类型声明库，你首先需要安装 Redux 和 Redux-Actions 库：

npm install --save redux redux-actions

接着就可以安装 @types/redux-actions 类型库了：

npm install --save-dev @types/redux-actions

基本用法

在 Redux-Actions 库中，我们使用 createAction() 方法来定义 action 类型和创建对应的 action 函数。createAction() 的返回结果是一个 Flux Standard Action（FSA，标准化的 Flux Action）对象的创建函数，可以将参数包装为 FSA 规范的 action 对象。

import { createAction } from 'redux-actions'

const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

console.log(increment())     // { type: 'INCREMENT' }
console.log(decrement())     // { type: 'DECREMENT' }

在上面的代码中，我们使用 createAction() 方法创建两个简单的 action 定义，增量和减量。这些方法没有任何参数，它们将在调用时返回 FSA 动作对象，该对象包括一个字符串类型的 type 属性来定义如何修改 Redux store 中的状态。

参数化的 Action

对于需要传递参数的 Action，我们可以使用 createAction() 方法的第二个参数（payloadCreator）来创建。

const addTodo = createAction('ADD_TODO', (text: string) => ({ text }))
console.log(addTodo('write article'))
// { type: 'ADD_TODO', payload: { text: 'write article' } }

在上面的代码中，我们在定义 addTodo action 的时候，使用了一个箭头函数作为 payloadCreator 参数来设置具体的值。

多参数 action

如果需要传递多个参数，则可以在 payload 创建函数中指定多个值：

const updateTodo = createAction(
  'UPDATE_TODO',
  (id: number, text: string) => ({ id, text })
)
console.log(updateTodo(42, 'update article'))
// { type: 'UPDATE_TODO', payload: { id: 42, text: 'update article' } }

处理异步 Action

在实际使用中，我们可能会遇到需要处理异步的 Action，例如发起一个网络请求获取数据等。在 Redux-Actions 库中，我们可以使用 createActions() 方法来创建用于处理异步 Action 的 action 类型和 action 函数。

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

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

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

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

在上面的代码中，我们通过 createActions() 方法一次定义了三个相关的 action 类型，分别是 FETCH_TODO、FETCH_TODO_SUCCESS 和 FETCH_TODO_FAILURE。接着，在 fetchTodoAction() 函数中，我们使用了 fetchTodo() 方法来标记异步请求的开始，并在 axios 的 then 和 catch 回调函数中使用了相关的方法来标记异步函数的成功和失败。

结语

使用 Redux-Actions 库，我们可以更加便捷、更加快速地创建 Redux 应用。同时，借助于 @types/redux-actions 类型声明库，我们可以在代码编写的过程中获得更高的可读性和类型安全性的保障。

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