Redux store.getState() всегда возвращает начальное состояние

Question

Я использую Redux в React Native приложении.

Мой файл:

import memoize from 'lodash.memoize';
import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
import { I18nManager } from 'react-native';
import configureStore from "../store/configureStore"

const store = configureStore();

export const translationGetters = {
    'en-US': () => require('../localizations/en.json'),
    'en-GB': () => require('../localizations/en.json'),
    'ru-RU': () => require('../localizations/ru.json'),
};

export const IMLocalized = memoize(
    (key, config) =>
        i18n.t(key, config).includes('missing') ? key : i18n.t(key, config),
    (key, config) => (config ? key + JSON.stringify(config) : key),
);

export const init = () => {
    let localeLanguageTag = Localization.locale;
    let isRTL = Localization.isRTL;
    IMLocalized.cache.clear();
    I18nManager.forceRTL(isRTL);
    i18n.translations = {
        [localeLanguageTag]: translationGetters[localeLanguageTag](),
    };
    i18n.locale = localeLanguageTag;
    getCodeLocal();
};

const getCodeLocal = () => {
    console.log('what is currently in store', store.getState())
}

При обращении к getCodeLocal я всегда получаю начальное состояние, даже если оно было изменено.

Как получить актуальное состояние вне компонента React?

Answer 1

По поводу

При обращении к getCodeLocal я всегда получаю начальное состояние, даже если оно было изменено.

Тут const store = configureStore(); ты инициализируешь store. А в getCodeLocal ты просто замыкаешь эту-же переменную в её изначальном состоянии.

Если в getCodeLocal вызвать store.dispatch(...), а потом store.getState(), то console.log покажет измененное состояние.

Поэтому обычно инициализацию store производят где-то в компоненте верхнего уровня, там где у тебя <Provider store={store}>...</Provider>. Так-как в Provider обернуто все твое приложение, то с помощью функции connect ты можешь связать store с каким-либо компонентом.

Теперь, по поводу

Как получить актуальное состояние вне компонента React?

Можно использовать redux-thunk (зайди на github и посмотри исходный код, там ничего сложного, всего 14 строк кода).

Далее делаешь action на подобии:

const getCodeLocalAction = () => (dispatch, getState) => {
  const currentState = getState();
  // Твой код
}

Или

import { smth } from './smth.js';

const getCodeLocalAction = () => (dispatch, getState) => {
  const currentState = getState();
  smth(currentState);
}

!!! Но тебе в любом случае придется коннектить эту функию и вызывать внутри компонента !!!

Напиши, как конкретно ты хочешь использовать свои функции и зачем тебе store и я попробую помочь.

БЛОГ НА HUSL

Redux store.getState() всегда возвращает начальное состояние

Ответы (1 шт):