函数未定义 store.getState()

Question

我在 React Native 中的商店遇到了一些问题。 我在我的文件 store/index.js 中配置了 store。 我将它导出，然后导入 App.js。 来自reducer的动作被正确执行，记录器在浏览器调试器中显示动作，但有一个问题“函数未定义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的设置上，它允许人们从浏览器中检查 redux 存储。 也许您可以尝试以下步骤，看看是否能解决您的问题：

1. 为您的浏览器安装 Redux Dev Tool 扩展：

   • 铬合金
   • 火狐

2. 将您的redux 存储添加到全局窗口对象

例如，一个简单的store.js文件可能如下所示：

商店.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__()

这将允许您从浏览器的控制台窗口中访问商店。 我们正在利用 redux 的compose功能将必要的中间件应用到我们的商店。

有关更多信息，请查看redux-devtools-extension官方文档以及这个有用的教程

希望这有帮助！

Answer 2

您应该安装https://github.com/jhen0409/react-native-debugger它包括用于检查商店的工具。 它比默认的浏览器调试器更有帮助。

Answer 3

如果你使用 'redux-persists' 并从 ../store 返回 {store,persistor} 试试这个：

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

const { store } = returnStoreAndPersistor()

console.log(store.getState())