Function is not defined store.getState()

Question

I've got some problems with the store in React Native. I configured store in my file store/index.js. I exported it and then imported in App.js. The actions from reducer are executed properly, logger shows actions in browsers debugger, but there is a problem "function is not defined store.getState(). When I type in browser console "store.getState()" I get a problem "store is not defined". I have no idea what might be wrong :/ Thanks for the help!

my file 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;

my file 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>

    );
  }
}

and dependencies:

  "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

Assuming your store is set-up correctly since you're seeing the proper actions fired off, from within your components, and these actions are being handled appropriately by the reducers. I suspect the issue is with the set-up of the redux-devtools-extension which allows one to inspect the redux store from within their browser. Perhaps you could try the following steps and seeing if this resolves your issue:

1. Install the Redux Dev Tool extension for your appropriate browser:

   • Chrome
   • Firefox

2. Add your redux store to the global window object

For example, a simple store.js file might look like the following:

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;

Note this line:

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

which will allow you to access the store from within your browser's console window. We are leveraging the compose function from redux to apply the necessary middleware to our store.

For more information check out the redux-devtools-extension official documentation as well as this helpful tutorial

Hopefully that helps!

Answer 2

You should install https://github.com/jhen0409/react-native-debugger it includes tools for inspecting the store. It is a lot more helpful than the default browser debugger.

Answer 3

If u use 'redux-persists' and return {store, persistor} from ../store just try this:

import returnStoreAndPersistor from "../../store";

const { store } = returnStoreAndPersistor()

console.log(store.getState())