Я сохраняю данные формы в хранилище избыточных данных после нормализации, используя normalizr. Когда я отправляю форму, я получаю денормализованные данные с помощью селекторов внутри блока и затем отправляю их на сервер. Поток идет следующим образом:
rootReducer -> localReducer -> action/actionCreator -> rootReducer
В файле rootReducer корневой редуктор составляет localReducer и содержит глобальный селектор, который будет использоваться позже в thunk. Файл localReducer импортирует действия из файла действий, который также содержит создателей действий. Создатель thunk action возвращает thunk, который выполняет вызов API, используя данные, полученные селектором в файле rootReducer, отсюда и циклическая зависимость.
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-saga модели:
rootReducer -> localReducer -> action/actionCreator
saga -> api -> rootReducer
Я привык к этой модели, но не могу поверить, что модель redux-thunk не решает эту проблему. Другими словами, нельзя сказать, что циклическая проблема является неотъемлемым побочным эффектом модели redux-thunk. Я что-то здесь упускаю?
Вы можете найти MCVE в этом репо . Ошибка другая, но это тот же принцип, она была вызвана циклическими зависимостями, вызванными следующим импортом в src/Users/actions.js файле:
import { getSelectedUsers } from '../reducer';
Произошла ошибка No reducer provided for key "users". Просто прокомментируйте приведенный выше импорт, и ошибка исчезнет.
Как я описал выше, это работает так, как задумано, моя проблема в том, что модель redux-thunk не обрабатывает этот вариант использования. Кроме того, размещение действий и создателей действий в одном файле и ожидание возникновения проблемы циклических зависимостей для их разделения не представляется масштабируемым решением.