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存储。也许您可以尝试以下步骤，看看是否可以解决您的问题：

为相应的浏览器安装Redux Dev Tool扩展程序：

Chrome

Firefox

将您的 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

希望有帮助！

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())

未定义函数store.getState（）

3 个答案: