Ошибка: вы не можете вызывать store.getState() во время выполнения редуктора. при смене языка с помощью react-i18next

Я обновил свой старый проект до более новых версий, таких как react v17.0.1 и react-i18next v11.8.3.

Теперь у меня проблема: каждый раз, когда я выбираю язык, который уже был загружен, я получаю сообщение об ошибке:

Вы не можете вызывать store.getState() во время выполнения редуктора. Редуктор уже получил состояние в качестве аргумента. Передайте его вниз от верхнего редуктора вместо того, чтобы читать его из магазина.

Например: исходный язык EN. Когда я выбираю другой язык и возвращаюсь к EN, появляется ошибка. Также то же самое, когда я переключаюсь, например, на ES, затем на DE, затем обратно, появляется ошибка ES. так что это не проблема с самим языком.

Я нашел это сообщение о переполнении стека но я не использую redux-devtools, как в посте.

Это реакция-i18next init

i18n.use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next) // pass the i18n instance to react-i18next.
    .init({
        lng: language,
        fallbackLng,
        whitelist: availableLanguages,
        detection: options,
        backend: {
            loadPath: languageUrl,
            crossDomain: true
        },
        interpolation: {
            escapeValue: false
        },
        react: {
            useSuspense: false
        },
    });

Поэтому каждый раз, когда я переключаюсь на язык, в первый раз он работает, но во второй раз происходит сбой в i18n.changeLanguage(....)

import i18n from "i18next";
export default function reducer(state = {
   language: 'en'
}, action) {
switch (action.type) {
    case "CHANGE_LANGUAGE": {
        console.log(action.payload)
        i18n.changeLanguage(action.payload);
        console.log("this will not appear the second time")

        return { ...state, language: action.payload };
    }
    default:
        break;
}

return state;
}

reactjs redux i18next react-i18next
person WeSt    schedule 10.02.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема здесь в том, что вы используете побочные эффекты в редьюсере: i18n.changeLanguage(action.payload) там нечего делать.

Вы можете либо прослушать изменение свойства language в редюсере из компонента React:

    const languageId = useSelector((state) => state.lang.languageId);
    useEffect(() => {
        i18n.changeLanguage(languageId);
    }, [languageId]);

Или вы можете использовать saga для обработки побочных эффектов. Последнее рекомендуется.

person Ioan Stoianov    schedule 21.07.2021