store.dispatch 不是一个函数 - 将原生 redux-persist 与 redux-thunk 中间件反应

Question

我是 redux-persist 的新手，我正在尝试将我的状态保存到本地存储。出现上述错误。

我在 Stack Overflow 中查找了解决方案，但在此处找不到与解决方案类似的问题。任何帮助将不胜感激。

这是我的商店代码：

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { createLogger } from "redux-logger";
import { createReactNavigationReduxMiddleware } from "react-navigation-redux-helpers";
import appReducer from "../reducers";


const persistConfig = {
  key: 'tcroot',
  storage: LocalStorage,
}

const persistedReducer = persistReducer(persistConfig, appReducer)

// instantiate logger middleware
const logger = createLogger();
const middleware = createReactNavigationReduxMiddleware(state => state.nav);

const composeEnhancers =
  (typeof window !== "undefined" &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
  compose;

const configureStore = () =>
  createStore(
    persistedReducer,
    composeEnhancers(applyMiddleware(thunk, logger, middleware))
  );


export default configureStore;

还有我的 app.js 代码：

import React, { Component } from "react";
import { Provider } from "react-redux";
import { PersistGate } from 'redux-persist/integration/react'
import configureStore from "./redux/store";
// import store from "./redux/store/dev";
import persistor from './redux/store/persistedStore';

import AppContainer from "./screens/AppContainer";

// const { store, persistor } = configureStore();
const store = configureStore();

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
          <AppContainer />
        </PersistGate>
      </Provider>
    );
  }
}

Answer 1

问题是你的configureStore 没有返回持久化器

需要这样

import { persistStore, persistReducer } from 'redux-persist'
//....

const configureStore = () => {
  let store = createStore(
    persistedReducer,
    composeEnhancers(applyMiddleware(thunk, logger, middleware))
  );
  let persistor = persistStore(store)
  return { store, persistor }
}