React、Redux、Thunk、Persist：typeError store.getState 不是函数。（在 'store.getState()' 中，store.getState' 是未定义的）？答案

【问题标题】：React, Redux, Thunk, Persist: typeError store.getState is not a function. (In 'store.getState()', store.getState' is undefined)?React、Redux、Thunk、Persist：typeError store.getState 不是函数。（在 'store.getState()' 中，store.getState' 是未定义的）？
【发布时间】：2020-01-30 10:37:26
【问题描述】：

我正在尝试在 React Native 应用程序中设置 redux、redux-thunk、redux-persist，我做错了什么？

configStore.tsx

import {createStore} from 'redux';
import {rootReducer} from './reducers';
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import AsyncStorage from '@react-native-community/async-storage';
import {applyMiddleware} from 'redux';
import thunk from 'redux-thunk';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
  let store = createStore(persistedReducer, applyMiddleware(thunk));
  let persistor = persistStore(store);
  return {store, persistor};
};

App.tsx

import React, {useState} from 'react';
import Drawer from './PreApp';
import {View, Text, Button, StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import store from './redux/configureStore';
import {PersistGate} from 'redux-persist/integration/react';
import persistor from './redux/configureStore';

const App = () => {
  return (
    <Provider store={store}>
      <Drawer />
    </Provider>
  );
};
export default App;

这是我收到的错误消息：

【问题讨论】：

标签： react-native redux redux-thunk redux-persist

【解决方案1】：

您正在从configureStore 导出一个函数，您首先需要调用它以获取store 和persistor，然后您可以将其传递给Provider 和PersistGate。

import React, {useState} from 'react';
import Drawer from './PreApp';
import {View, Text, Button, StyleSheet} from 'react-native';
import {Provider} from 'react-redux';
import createStore from './redux/configureStore'; // imported the default function
import {PersistGate} from 'redux-persist/integration/react';

const {store, persistor} = createStore(); // destructed the result to get the store & persistor

const App = () => {
  return (
    <Provider store={store}>
      {/*Wrap the main component PersistGate*/}
      <PersistGate loading={<Text>Loading...</Text>} persistor={persistor} > 
        <Drawer />
      </PersistGate>
    </Provider>
  );
};
export default App;

【讨论】：