Импорт избыточного действия делает другие действия неопределенными

Question

Это одна из самых странных вещей, которые я когда-либо видел. Это абсолютно бессмысленно для меня. Короткая версия - у меня есть функция создателя действий 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 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';

Итак, как оно ломается?

1. Импорт функции showAddCategoryModal в filterInputModal.reducer.js теперь не определен.
2. Поскольку редуктор использует функции в качестве ключей для обработки действий, он больше не может правильно обрабатывать действие и обновлять состояние.

Это становится все более странным. Вот некоторые из странных поступков, которые я вижу.

1. Если я импортирую это действие в любой другой компонент, все в порядке. Импорт в редуктор неизменен.
2. Импорт функции в файлах ManageVideoFilters.js и VideoFileEdit.js выполнен нормально.

Так ... у кого-нибудь есть идеи? Это действительно очень странно и не имеет для меня никакого смысла. Я никогда не видел этого раньше.

Спасибо.

Answer 1

Как сказал комментатор, проблема заключалась в рекурсивном импорте.Мой filterInputModal.reducer.js экспортировал некоторые константы, которые были импортированы в мой filterInputModal.actions.js.Действия из filterInputModal.actions.js были затем импортированы в filterInputModal.reducer.js.Следовательно, рекурсивный импорт.

Я переместил константы в новый файл, filterInputModal.constants.js, и viola, проблема решена.