Question

我试图将redux-persist添加到我的项目中，但它一直呈现白色页面。如果我删除，则渲染成功。另外，如果我将加载道具添加到PersistGate，（例如，这样我就可以在页面上看到“加载中...”。

我也没有在本地存储中看到persist：root。

我已经阅读了文档，并认为我正确设置了react-persist。我需要添加其他内容吗？

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import * as serviceWorker from './serviceWorker';
import {Provider} from 'react-redux';
import configureStore from './lib/configureStore';
import createHistory from 'history/createBrowserHistory';
import {PersistGate} from 'redux-persist/integration/react';

const history = createHistory();
const {store, persistor} = configureStore({history});

ReactDOM.render(
        <PersistGate persistor={persistor}>
            <Provider store={store}>
                <App />
            </Provider>
        </PersistGate>,
    document.getElementById('root')
);

serviceWorker.unregister();

// configureStore.js

import { routerMiddleware } from 'react-router-redux';
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/es/storage';
import { rootReducer } from '../redux';
import thunk from 'redux-thunk';

const config = {
    key: 'root',
    storage,
};

const reducer = persistReducer(config, rootReducer);

const configureStore = () => {
    const middlewares = [routerMiddleware, thunk];

    const store = createStore(
        reducer,
        composeWithDevTools(applyMiddleware(...middlewares))
    );

    const persistor = persistStore(store);
    return { persistor, store };
};

export default configureStore;

// redux / index.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import header from './header';

export const rootReducer =  combineReducers({
    header,
    routing: routerReducer,
});

Redux-Persist无法持久保存并且本地存储为空

0 个答案: