gpt4 book ai didi

javascript - 如何定义 Redux Actions 的 Flow 类型?

转载 作者:行者123 更新时间:2023-11-28 04:15:44 24 4
gpt4 key购买 nike

我正在研究使用 Flow 输入 Redux 操作的方法。使用以下定义,它在 Action 创建者和 reducer 中都部分工作。自动完成功能会选取所有 4 个操作作为两个位置中 action.type 的可能值。

// @flow
type ModuleActionTypes1 = 'moduleOne/ACTION_ONE' | 'moduleOne/ACTION_TWO';
type ModuleActionTypes2 = 'moduleTwo/ACTION_ONE' | 'moduleTwo/ACTION_TWO';

type ActionTypes = ModuleActionTypes1 | ModuleActionTypes2;

type Action<T> = {
type: ActionTypes,
payload: T
};

type Payload = {
url: string
};

const actionCreator = (url: string): Action<Payload> => {
return {
type: 'moduleOne/ACTION_ONE',
payload: {
url: url
}
};
};

const reducer = (state: string, action: Action<Payload>): string => {

if(action.type === 'wrong') {
// action.type cannot be this
}

switch (action.type) {
case 'moduleOne/ACTION_ONE':
case 'wrong': // action type cannot be this
const { url } = action.payload;
return url;
default:
return state;
}
};

它几乎满足了我的要求。主要有两个问题:

  1. 开关盒不必是 action.type 之一,因此可能会出现拼写错误。这表明我应该坚持使用字符串常量。

  2. 当我 import type { ModuleActionTypes1 } from '../moduleOne'; (而不是在同一文件中定义它进行测试)时,自动完成功能停止工作,但 Flow 在命令行。所有文件都包含@flow 注释。

有更好的方法吗?

最佳答案

所以,这与你的问题有点不同,但我建议采取一些不同的做法。现在,您的操作类型表示任何有效负载都可以属于任何操作。如果您使用类型来仅定义允许的状态,那么流程会更有帮助。

我不知道你的行为是做什么的,所以这里是一个随机的例子:

type CreatePerson = { type: 'create-person', person: Person };
type DestroyPerson = { type: 'destroy-person', personId: number };
type ChangePersonName = { type: 'change-name', personId: number, name: string }
type PersonActions = CreatePerson | DestroyPerson | ChangePersonName

以这种方式进行设置有助于确保每个 Redux 操作都拥有正确类型的正确数据。在您的 reducer 中,您仍然可以在 action.type 上执行 switch/if 来选择要使用的情况。但现在,通过字符串挑选类型,Flow 还可以准确地知道操作中存在什么类型的数据。这可以让您避免 Flow 无法进行类型检查的强制转换或不安全解构。​​

关于javascript - 如何定义 Redux Actions 的 Flow 类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45870920/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com