javascript - 使用 PersistGate 加载屏幕不会呈现

Question

我正在使用 redux-persist，并尝试渲染一个屏幕，并将其传递给 PersistGate 的加载属性。

我做了一些研究，发现我应该将 REHYDRATE 分派(dispatch)到 reducer ，但这也不起作用。

也许我没有很好地配置我的 reducer ？我还希望能够将 loading 属性设置为 null 以避免应用程序渲染之前出现闪屏，但结果与向其传递一个要渲染的组件相同。

这是我的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 调用是错误的，因为增强器作为第三个参数传递。将其更改为:

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

应该可以了。

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