Question

我正在使用redux-persist，并且试图渲染一个将其传递给PersistGate的加载道具的屏幕。

我做了一些研究，发现我应该将REHYDRATE派递给异径管，但这也不起作用。

也许我的减速器配置不正确？我还希望能够将load prop设置为null，以避免在App渲染之前出现闪屏，但是结果与将其传递给要渲染的组件相同。

这是我的index.js代码

import App from './App';
import React from 'react';
import { Provider } from 'react-redux';
import { AppRegistry } from 'react-native';
import { PersistGate } from 'redux-persist/integration/react';
import { SplashScreen } from './src/screens/SplashScreen';
import configureStore from './src/store/configureStore';

const store = configureStore();
const persistor = configureStore();

const RNRedux = () => (
    <Provider store={store}>
        <PersistGate loading={<SplashScreen/>} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>
);

componentDidMount = () => {
    this.persistor.dispatch({ type: REHYDRATE });
};

AppRegistry.registerComponent('Sharryapp', () => RNRedux);

那是我的configureStore文件：

import { createStore, combineReducers, applyMiddleware} from 'redux';
import ServerReducer from './reducers/ServerReducer';
import InviteReducer from './reducers/InviteReducer';
import { persistStore, persistReducer } from 'redux-persist';
import thunk from 'redux-thunk';
import storage from 'redux-persist/lib/storage';

const rootReducer = combineReducers({
    server: ServerReducer,
    invite: InviteReducer,
});

const persistConfig = {
    key: 'root',
    debug: true,
    storage, 
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer,applyMiddleware(thunk));

const persistor = persistStore(store);

export default configureStore = () => {
    return ( store, persistor );
};

Answer 1

我不确定为什么要将包装和持久性包装在configureStore函数中。而是分别导入两者：

export const store = createStore(persistedReducer,applyMiddleware(thunk));
export const persistor = persistStore(store);

并将它们导入所需的文件中：

import {store, persistor} from './src/store/configureStore';

我还注意到您的createStore调用为false，因为增强器作为第三个参数传递。更改为：

const store = createStore(persistedReducer, undefined, applyMiddleware(thunk));

应该这样做。

此外，您无需调度补水动作，因为它会在应用启动时自动发生。

使用PersistGate加载屏幕无法呈现

1 个答案: