导入 redux 操作会使其他操作未定义

这是我见过的最奇怪的事情之一。这对我来说完全没有意义。简短的版本是我有一个 Redux 动作创建器功能。如果我将此函数导入到这个特定的组件文件中，它将使从其文件导入的每个函数都未定义。

因此，让我们从文件filterInputModal.actions.js开始。这包含我的 Redux 操作函数，使用 redux-starter-kit 创建：

export const showAddCategoryModal = createAction('showAddCategoryModal');

这就是我一直在使用的功能。现在，这个函数早已导入到我的ManageVideoFilters.js组件中：

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { showAddCategoryModal } from 'store/filterInputModal/filterInputModal.actions';
const ManageVideoFilters = (props) => {
/* Component logic */
};
/* PropTypes and mapStateToProps */
const mapDispatchToProps = (dispatch) => bindActionCreators({
showAddCategoryModal: () => showAddCategoryModal() // Done this way to avoid passing in a payload, since certain default event payloads cause Redux to print console errors
});
export default connect(mapStateToProps, mapDispatchToProps)(ManageVideoFilters);

目前为止，一切都好。在我们打破一切之前，让我们看一下我的filterInputModal.reducer.js Redux reducer，也是使用Redux Starter Kit创建的：

import { createReducer } from 'redux-starter-kit';
import { showAddCategoryModal } from './filterInputModal.actions';
const initialState = {}; // The initial state for the reducer goes here
const handleShowAddCategoryModal = (state) => {
/* handle updating the state */
return state;
};
const actionMap = {
[showAddCategoryModal]: handleShowAddCategoryModal
};
export default createReducer(initialState, actionMap);

操作映射使用操作创建器函数 toString() 作为键，然后我提供自己的函数来处理状态更新。同样，在这一点上，一切都是完美的。我们一会儿再回到减速器，先让我们打破一些东西。

现在我们要转到我的 VideFileEdit.js 组件。如果我们向此组件添加以下行，则一切都会中断：

import { showAddCategoryModal } from 'store/filterInputModal/filterInputModal.actions';

那么，它是如何打破的呢？

在filterInputModal.reducer.js中导入showAddCategoryModal 函数现在未定义。
使用函数作为键来处理操作，因此化简器无法再正确处理动作并更新状态。

不过，它变得更奇怪了。以下是我看到的一些奇怪的行为。

如果我将此操作导入任何其他组件，则一切都很好。减速机中的导入保持不变。
ManageVideoFilters.js和VideoFileEdit.js中导入该函数都可以。

那么，接下来我可以尝试什么？这真的很奇怪，对我来说没有任何意义。我以前从未见过这个。

正如评论者所说，问题是递归导入。我的 filterInputModal.reducer.js 导出了一些常量，这些常量被导入到我的 filterInputModal.actions.js 中。然后，来自filterInputModal.actions.js的操作被导入到filterInputModal.reducer.js中。因此递归导入。

我将常量移动到一个新文件中，filterInputModal.constants.js，中提琴，问题解决了。

相关内容

最新更新

热门标签：