Question

我在使用normalizr对其进行规范化后，将表单数据存储在redux存储中。当我提交表单时，我使用thunk中的选择器获取非规范化数据，然后将其发送到服务器。流程采用以下方式：

rootReducer -> localReducer -> action/actionCreator -> rootReducer

在rootReducer文件中，根缩减器组成localReducer并包含稍后在thunk中使用的全局化选择器。 localReducer文件也会从包含操作创建者的操作文件中导入操作。 thunk动作创建者使用rootReducer文件中的选择器检索的数据返回一个执行api调用的thunk，因此是循环依赖。

Webpack没有很好地处理这种循环依赖。我在Uncaught TypeError: Cannot read property 'JOB_FORM_RESET' of undefined级别遇到了运行时localReducer -> action/actionCreator错误：

const jobsForm = (state = initialState, action) => {
  switch (action.type) {
    case ActionTypes.JOB_FORM_RESET:

关于如何解决这个问题的任何想法？

修改

被评估为ActionTypes的

undefined按照规定运作。 ActionTypes位于action/actionCreator文件中，该文件在localReducer首次导入时执行未完成，因为它立即开始导入rootReducer。为了避免无限循环，action/actionCreator的未完成副本（其中ActionTypes被评估为undefined）被赋予localReducer。

解决方案是将动作和动作创建者分成两个不同的文件来分离。这将删除循环依赖关系，如以下流程所示：

rootReducer -> localReducer -> action
actionCreator -> rootReducer

对我来说奇怪的是，在redux指南中已经提出了分组动作和动作创建者，因为太长时间并将它们分成两个文件感觉不太自然。

此外，此循环问题不会出现在redux-saga模型中：

rootReducer -> localReducer -> action/actionCreator
saga -> api -> rootReducer

我习惯了这个模型但不相信redux-thunk模型不能解决这个问题。换句话说，循环问题是redux-thunk模型的固有副作用似乎不公平。我在这里错过了什么吗？

您可以在此repo中找到MCVE。错误是不同的，但它是相同的原则，它是由src/Users/actions.js文件中的以下导入引起的循环依赖性引起的：
import { getSelectedUsers } from '../reducer';

发生的错误是No reducer provided for key "users"。只需评论上述导入，错误就会消失。

正如我上面所描述的那样，这是有效的，我关心的是redux-thunk模型不能处理这个用例。此外，将动作和动作创建者放在同一个文件中然后等待循环依赖性问题来分离它们似乎不是一个可扩展的解决方案。

Answer 1

解决方案非常简单：将actionTypes解压缩到单独的文件并将其导入actions.js和reducer.js

actionTypes.js档案：

export const SELECT_USER = 'SELECT_USER'; export const POST_USERS = 'POST_USERS';

您可以像这样一次导入所有操作

import * as actionTypes from './actionTypes.js'

问题解决了：

https://github.com/libgdx/libgdx/blob/master/gdx/src/com/badlogic/gdx/graphics/g3d/utils/ModelBuilder.java

另外两项建议：

提取选择器以分隔文件
提取＆＃34;效果＆＃34; （postUsers）到effects.js

第二个建议来自经验，redux-thunks的教程保留在actions.js中的这些功能（副作用）实际上是副作用，而不是动作创建者。

如果您使用Redux-Saga，您很快就会意识到将业务逻辑（和副作用）与动作创建者分离是一件好事。

此外，它们是两个不同的东西： - ）

在副作用中使用全球化的Redux选择器创建循环依赖

修改

1 个答案: