Функция не определена store.getState ()

Question

У меня проблемы с магазином в React Native. Я настроил хранилище в моем файле store / index.js. Я экспортировал его, а затем импортировал в App.js. Действия из редуктора выполняются правильно, логгер показывает действия в отладчике браузера, но есть проблема "функция не определена store.getState (). Когда я набираю в консоли браузера" store.getState () "У меня проблема" store не определено ". Понятия не имею, что может быть не так: / Спасибо за помощь!

мой файловый магазин / index.js:

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { default as mailReducer } from './Mail';
import { default as authReducer } from './Auth';
import { navReducer } from './Navigation';
import { logger } from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';
import { combineEpics, createEpicMiddleware } from 'redux-observable';
import { middleware as navMiddleware } from "../navigation";

const rootReducer = combineReducers({
    points: mailReducer,
    auth: authReducer,
});



const initialState = {};

const store = createStore(
  rootReducer,
  applyMiddleware(logger)
);

export default store;

Мой файл App.js:

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";
import { default as NavigationComponent } from './navigation';
import store from "./store/index.js";
import { IntlProvider, addLocaleData} from "react-intl";
import messages_pl from "./formattedMessages/pl.json";
import locale_pl from 'react-intl/locale-data/pl';

import { connect, Provider } from "react-redux";

addLocaleData([...locale_pl]);

global.Intl = require('intl');

const messages = {
    'pl': messages_pl,
};

const initialState = {};

export default class App extends Component<Props> {

  render() {
    return (
      <Provider store={store}>
        <IntlProvider locale="pl" messages={messages["pl"]} textComponent={Text}>
          <NavigationComponent  />
        </IntlProvider>
      </Provider>

    );
  }
}

и зависимости:

  "dependencies": {
    "axios": "^0.18.0",
    "intl": "^1.2.5",
    "react": "16.8.3",
    "react-intl": "^2.7.2",
    "react-native": "0.59.5",
    "react-native-gesture-handler": "^1.2.1",
    "react-navigation": "^3.11.0",
    "react-navigation-redux-helpers": "^3.0.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-axios-middleware": "^4.0.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-observable": "^1.1.0",
    "rxjs": "^6.0.0-beta.0"
  },

Answer 1

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

1. Установите расширение Redux Dev Tool для вашего соответствующего браузера:

   • Chrome
   • Firefox

2. Добавьте свое избыточное хранилище к объекту глобального окна

Например, простой файл store.js может выглядеть следующим образом:

store.js:

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

Обратите внимание на эту строку:

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

, которая позволит вам получить доступ к магазину из окна консоли вашего браузера.Мы используем функцию compose от redux для применения необходимого промежуточного программного обеспечения в нашем магазине.

Для получения дополнительной информации ознакомьтесь с redux-devtools-extension официальной документацией , а также с этой полезной учебник

Надеюсь, это поможет!

Answer 2

Вы должны установить https://github.com/jhen0409/react-native-debugger, он включает в себя инструменты для осмотра магазина. Это намного полезнее, чем стандартный отладчик браузера.