如何连接中间件和 redux-persist答案

【问题标题】：How connect Middleware and redux-persis如何连接中间件和 redux-persist
【发布时间】：2020-07-21 03:50:32
【问题描述】：

如何连接中间件和 redux-persis？下面是我的 index.js 和 store.js，我不知道如何正确连接它们。现在我有一个错误“Uncaught TypeError: Cannot read property 'dispatch' of undefined” 我该如何解决？谢谢！

商店

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

const persistedReducer = persistReducer(persistConfig, Reducer);
const persistor = persistStore(store);


const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;


const store = createStore(
    persistedReducer,
    composeEnhancers(
        applyMiddleware(thunk)
    )
)

export {store, persistor};

index.js

import {BrowserRouter} from "react-router-dom";
import {Provider} from "react-redux";
import {store, persistor} from "./Store/store.js";
import {PersistGate} from "redux-persist/integration/react";

const app =(
    <Provider store={store} >
        <PersistGate loading={null} persistor={persistor}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </PersistGate>
    </Provider>
)

ReactDOM.render(app, document.getElementById("root"));

【问题讨论】：

对于未捕获的类型错误，您有更好的堆栈跟踪吗？
persistStore.js?2a8a:114 Uncaught TypeError: Cannot read property 'dispatch' of undefined at Object.persist (persistStore.js?2a8a:114) at persistStore (persistStore.js?2a8a:123)在 eval (store.js?40cf:14) 在 Module../src/Store/store.js (main.js:1562) 在 webpack_require (main.js:20) 在 eval (index .js?b635:1) 在 Module../src/index.js (main.js:1909) 在 webpack_require (main.js:20) 在 Object.0 (main.js:1932) ) 在 webpack_require (main.js:20) 这是所有错误文本

标签： reactjs redux react-redux local-storage jsx

【解决方案1】：

您似乎正在尝试在创建商店之前对其进行持久化。我建议以预加载状态传递：

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

const persistedReducer = persistReducer(persistConfig, Reducer);
const preloadedState = {
  // Fill out accordingly
}

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    }) : compose;


const store = createStore(
    persistedReducer,
    preloadedState,
    composeEnhancers(
        applyMiddleware(thunk)
    )
)

const persistor = persistStore(store);

export {store, persistor};

【讨论】：