reactjs - 使用 Redux hooks 时你需要 action creators 吗?

标签 reactjs redux react-redux

这是一个奇怪的问题,但我一直没能找到明确的答案。 在我的项目中,我将 Redux 与新的 Redux Hook 、useSelector 和 useDispatch 结合使用。设置是标准的:

reducer :

const reducer = (state = defaultState, action) => {
switch (action.type) {
type SOME_ACTION:
return { 
...state, 
someVariable: action.payload 
}
default: 
return state
}

同步 Action :

export function someAction(payload) {
return { 
type: SOME_ACTION
payload: payload 
}

在组件中我使用 dispatch({type: SOME_ACTION, payload: payload}).

最近我注意到,即使 action creator 不存在,调度也能正常工作:例如,如果 SOME_ACTION 类型列在 reducer switch 运算符中,但没有函数 someAction(payload)。 问题是:在这种情况下编写 action creators 是多余的吗?使用 Redux Hook 时的最佳实践是什么?

最佳答案

你当然可以使用 Action 对象字面量

dispatch({ type: 'MY_SUPER_AWESOME_ACTION });

但是创建 action creator 可以让您更有效地重用代码。

const mySuperAwesomeAction = () => ({ type: 'MY_SUPER_AWESOME_ACTION });

现在,在您的应用中任何需要发送此操作的地方,您都可以导入该操作并使用

dispatch(mySuperAwesomeAction());

随着应用的增长和 Action 在多个组件中的使用,如果您使用对象字面量,您将需要查找/替换 Action 字面量的所有实例,希望您没有打错任何一个。使用单个 Action 创建器定义,您只需在单个位置更新它。

关于reactjs - 使用 Redux hooks 时你需要 action creators 吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66023340/

相关文章:

reactjs - URL 更改但 View 在 React Router 4 中没有更改

reactjs - 当需要函数内具有动态路径的文件时,如何修复 eslint 失败?

reactjs - Redux-persist迁移不迁移

reactjs - takeEvery 和 takeLatest。为什么?什么时候使用?同时使用?

reactjs - 构建离线优先的 React Native 应用程序的最佳堆栈是什么?

android - 哪种 JavaScript 框架最适合移动应用程序开发

node.js - 在 props 中传递 Redux store

javascript - Redux - 相同的 reducer 、容器和组件产生不同的结果

javascript - 如何提交新帖子?

javascript - 正确更新状态数组中给定索引处的项目