npm 包 redux-methods 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

redux-methods 是一个基于 Redux 的 npm 包，它可以简化 Redux 应用程序中的 action 和 reducer 的编写流程。

它提供了一些最常用的 action 类型和 reducer 方法，例如 SET_VALUE 和 resetReducer。此外，它还允许你自定义你自己的 action 类型和 reducer。

使用 redux-methods 可以将 Redux 应用程序中的代码量大大减少，提高开发效率。

安装

在项目根目录下，执行以下命令进行安装：

npm install redux-methods

使用

在 Redux 应用程序中，我们通常需要定义 action 类型和 reducer 方法。使用 redux-methods 可以简化这个过程。

定义 action 类型

首先，在你的应用程序中定义 action 类型（可以在一个单独的文件中定义，也可以与 reducer 方法定义在同一个文件中）：

import { createMethodActionTypes } from 'redux-methods';

export const actionTypes = createMethodActionTypes([
  'INCREMENT',
  'DECREMENT',
  'SET_VALUE',
]);

上面的代码定义了三个 action 类型：INCREMENT、DECREMENT 和 SET_VALUE。你还可以自己定义其他的 action 类型。

定义 reducer 方法

接下来，定义 reducer 方法。使用 redux-methods，定义 reducer 方法只需要传入一个默认的状态对象即可（同时也可以在状态对象中定义默认的属性值）：

import { createMethodReducer } from 'redux-methods';
import { actionTypes } from './actionTypes';

const initialState = {
  value: 0,
};

export const reducer = createMethodReducer(actionTypes, initialState);

createMethodReducer 方法接收两个参数，第一个参数是你在之前定义的 action 类型，第二个参数是默认的状态对象。

上面的代码表示，当你调用 INCREMENT 或 DECREMENT 的 action 时，会自动从 value 属性中增加或减少 1。

创建 action

现在我们来创建 action，可以直接使用 createMethodAction 方法创建，只需要传入一个字符串表示调用的 action 类型即可：

import { createMethodAction } from 'redux-methods';
import { actionTypes } from './actionTypes';

export const increment = () => createMethodAction(actionTypes.INCREMENT);
export const decrement = () => createMethodAction(actionTypes.DECREMENT);
export const setValue = value => createMethodAction(actionTypes.SET_VALUE, { value });

上面的代码分别定义了 increment、decrement 和 setValue 这三个 action。increment 和 decrement 不需要传递参数，而 setValue 需要传递一个 value 的参数。

发起 action

最后，我们来看一下如何发起 action，在组件中使用 Redux 的 dispatch 方法来发起一个 action：

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

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

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

上面的代码中，useDispatch 和 useSelector 是 React-Redux 提供的两个 Hook，useDispatch 用于获取 dispatch 方法，useSelector 用于获取 Redux 中的状态值。

当用户点击加号或减号按钮时，会分别调用 increment 和 decrement 这两个 action。当用户在输入框中输入一个值时，会调用 setValue。每次调用 action 后，store 中的状态都会自动更新。

总结

使用 redux-methods 可以极大地简化 Redux 应用程序的代码量，提高开发效率。只需要定义一些常用的 action 类型和 reducer 方法，然后使用 createMethodAction 来创建 action，在组件中使用 dispatch 发起 action 即可。

当然，如果您需要自定义复杂的 action 类型和 reducer 方法，也可以使用 Redux 原生的 API 来实现。但是对于大部分应用程序来说，redux-methods 足以胜任。

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