函數未定義 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())