«Неожиданный ключ« foo »найден в предыдущем состоянии, полученном редуктором» с хранилищем конфигурации redux-toolkit и настраиваемым усилителем хранилища

Я пытался создать усилитель магазина, который добавляет некоторые новые значения в мое корневое состояние. Однако после того, как я обдумал все работы пользовательского энхансера, я получаю неожиданную ключевую ошибку. Я вижу новую часть состояния в devtools, и приложение работает нормально, однако я получаю

Unexpected key "foo" found in previous state received by the reducer. 
Expected to find one of the known reducer keys instead: [...]. Unexpected keys will be ignored.

Чего я просто не понимаю. Я попытался поискать, но ни один из постов, которые я нашел, не касался случая пользовательского усилителя магазина.

Вот минимальный код, который воспроизводит указанную ошибку. Я создаю свой магазин следующим образом:

export const store = configureStore({
    reducer: mainReducer,
    enhancers: [testEnhancer],
});

Где mainReducer — это просто combReducers({ "my slices" }), а все слайсы создаются с помощью createSlice из RTK.

TestEnhancer выглядит так:

type StateExt = { foo: string }
export const testEnhancer: StoreEnhancer<{}, StateExt> = (next: StoreEnhancerStoreCreator): StoreEnhancerStoreCreator<{}, StateExt> => {
    
    return <S, A extends Action = AnyAction>(reducer: Reducer<S, A>, preloadedState?: PreloadedState<S>): Store<S & StateExt, A> => {
        
        const wrappedReducer: Reducer<S & StateExt, A> = (state, action) => {
            return { ...reducer(state, action), foo: 'bar' };
        };
        
        return next(wrappedReducer, { ...preloadedState, foo: '' });
    };
};
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
1 019
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На самом деле это поведение, характерное для combineReducers. Ожидается постоянное сопоставление 1:1 между любыми ключами состояния верхнего уровня и соответствующими редукторами слайсов.

Вам нужно будет как-то настроить собственный редуктор, который справится с этим, или вообще не использовать combineReducers. (Есть много похожих версий, которые в целом ведут себя одинаково, но без предупреждений.)

Другие вопросы по теме