Redux 中动作文件的用途是什么?
What is the purpose of an actions file in Redux?
我对 redux 的理解有很大问题。最糟糕的是,我必须将它与 vanillia js 一起使用,但首先我必须了解 redux 的元素。好吧,我了解 reducer。有状态和功能。但是行动?只有可能的操作名称,例如:
const ADD = 'ADD'
export function add(number) {
return { type: ADD, number}
}
而且只有它给我的东西,然后在 switch/case 在减速器中我有 ADD I 运行 一些功能(来自减速器)。而且我不明白这个功能 add 到底应该做什么。我在 reducer 中有函数,那么为什么我需要 return 我键入和编号的东西?即使我有很多函数,action 也只会给我更多的名称、变量和函数,最终会造成大混乱和查找问题。而 redux 应该给出相反的东西。
而且,我真的明白这个问题是我不明白的东西,如果我理解它,redux 应该给我清晰易懂的全局存储。
那么,有人可以帮我吗?
你说的是“Action Creators”。
它们不是严格要求的。你可以像dispatch({ type: ADD, number})
一样直接调用dispatch
。但大多数人更喜欢使用动作创建器,这样他们就可以调用 dispatch(add(number))
。它添加了一个抽象层,这样您就可以调用一个动作而无需知道底层动作对象的结构。如果操作对象很复杂,它会简化事情。
redux 中的“动作”是一个对象,它具有 type
属性 并且还具有 reducer 执行动作所需的所有其他信息。在您的情况下,额外信息只是 number
,但它可能更复杂。
这是你的操作:
{ type: ADD, number}
动作创建器是一个函数,它接受一些参数并使用这些参数创建动作对象。
这是您的动作创作者:
export function add(number) {
return { type: ADD, number}
}
你的非常简单,但这里有一个例子向你展示它可能如何更复杂。
export function updateUser(userId, changes) {
return {
type: UPDATE_USER,
payload: {
id: userId,
changes,
},
meta: {
timestamp: Date.now(),
}
};
}
这个函数除了创建动作之外不做任何事情。它不会更新用户——这是减速器的工作。
如果你想减少样板文件的数量,你可以考虑使用 Redux Toolkit 包,它通过基于 reducer 自动创建操作来简化事情。
我对 redux 的理解有很大问题。最糟糕的是,我必须将它与 vanillia js 一起使用,但首先我必须了解 redux 的元素。好吧,我了解 reducer。有状态和功能。但是行动?只有可能的操作名称,例如:
const ADD = 'ADD'
export function add(number) {
return { type: ADD, number}
}
而且只有它给我的东西,然后在 switch/case 在减速器中我有 ADD I 运行 一些功能(来自减速器)。而且我不明白这个功能 add 到底应该做什么。我在 reducer 中有函数,那么为什么我需要 return 我键入和编号的东西?即使我有很多函数,action 也只会给我更多的名称、变量和函数,最终会造成大混乱和查找问题。而 redux 应该给出相反的东西。
而且,我真的明白这个问题是我不明白的东西,如果我理解它,redux 应该给我清晰易懂的全局存储。
那么,有人可以帮我吗?
你说的是“Action Creators”。
它们不是严格要求的。你可以像dispatch({ type: ADD, number})
一样直接调用dispatch
。但大多数人更喜欢使用动作创建器,这样他们就可以调用 dispatch(add(number))
。它添加了一个抽象层,这样您就可以调用一个动作而无需知道底层动作对象的结构。如果操作对象很复杂,它会简化事情。
redux 中的“动作”是一个对象,它具有 type
属性 并且还具有 reducer 执行动作所需的所有其他信息。在您的情况下,额外信息只是 number
,但它可能更复杂。
这是你的操作:
{ type: ADD, number}
动作创建器是一个函数,它接受一些参数并使用这些参数创建动作对象。
这是您的动作创作者:
export function add(number) {
return { type: ADD, number}
}
你的非常简单,但这里有一个例子向你展示它可能如何更复杂。
export function updateUser(userId, changes) {
return {
type: UPDATE_USER,
payload: {
id: userId,
changes,
},
meta: {
timestamp: Date.now(),
}
};
}
这个函数除了创建动作之外不做任何事情。它不会更新用户——这是减速器的工作。
如果你想减少样板文件的数量,你可以考虑使用 Redux Toolkit 包,它通过基于 reducer 自动创建操作来简化事情。