javascript - 函数未定义 store.getState()

Question

我在 React Native 中的商店遇到了一些问题。我在我的文件 store/index.js 中配置了存储。我将其导出，然后导入到 App.js 中。来自 reducer 的 Action 正确执行，记录器在浏览器调试器中显示 Action ，但存在问题“函数未定义 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

假设您的商店设置正确，因为您看到从您的组件中触发了正确的操作，并且这些操作正在由 reducers 正确处理。我怀疑问题出在 redux-devtools-extension 的设置上，它允许人们从浏览器中检查 redux 存储。或许您可以尝试以下步骤，看看是否能解决您的问题:

1. 为您合适的浏览器安装 Redux 开发工具扩展:

   • > Chrome
   • > Firefox

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

例如，一个简单的 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__()

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

有关更多信息，请查看 redux-devtools-extension 官方 documentation以及这个有用的tutorial

希望对您有所帮助!