use-methods

> 编程语言

开源

使用 Reducers 的更简单方法

711 stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

使用 Reducers 的更简单方法

`use-methods`()

安装

选择你的毒药:

bash

  npm install use-methods

bash

  yarn add use-methods

使用方法

此库导出了一个单个 React 钩子, useMethods, 它拥有 useReducer 的所有功能,但没有动作和分发器带来的仪式。基本 API 遵循与 useReducer 类似的模式:

javascript

const [state, callbacks] = useMethods(methods, initialState);

与其提供一个单一的"reducer"函数,这个函数是一个针对某个操作类型的巨大的 switch 语句,不如提供一组"方法",这些方法会修改状态或返回新的状态。同样,除了最新的状态之外,你得到的回调函数并不是一个单一的dispatch函数,而是与你的方法对应的一组回调函数。

以下是一个完整的示例：```js import useMethods from 'use-methods';

function Counter() {

const [ { count }, // Count: {count} Reset + -

); }

const initialState = { count: 0 };

const methods = state => ({ reset() { return initialState; }, increment() { state.count++; }, decrement() { state.count--; }, }); ``` 注意：methods 工厂函数必须在每次调用时生成相同的方法名称集。 ### 与 useReducer 的比较这里有一个更复杂的示例，涉及使用 useReducer 和 useMethods 分别实现的计数器列表： 你更喜欢写哪一个？ ## 不变性 use-methods 基于 immer，允许您以一种命令式、改变式的方式编写方法，尽管幕后管理的实际状态是不变的。您还可以从方法中返回完全新的状态，以便更方便地进行操作（如上述 reset 示例）。

如果您想从 immer 使用补丁功能,可以向 useMethods 传递一个包含 methods 属性和 patchListener 属性的对象。