Question

我想使用 Redux-persist 和 AsyncStorage 在React Native应用程序中保留一些数据。我尝试根据不同的教程进行弄清，但 Expo仍然卡住，显示“正在下载javascript软件包-100％”消息。

如果删除PersistGate组件，似乎我的博览会应用程序正常启动。

这是我的尝试（根据不同的教程：

import React, { useState, useEffect, useCallback } from 'react';
import { AsyncStorage } from 'react-native';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import thunk from 'redux-thunk';
import { Provider, useDispatch } from 'react-redux';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';

import Navigation from './navigation/navigation';

import { fetchMovies } from './store/movies/movies.actions';
import { moviesReducer } from './store/movies/movies.reducer';
import { userReducer } from './store/user/user.reducer';

import './cancel-warnings';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: [userReducer]
}

const rootReducer = combineReducers({
  movies: moviesReducer,
  user: userReducer
});

persistReducer(persistConfig, rootReducer);

const store = createStore(rootReducer, applyMiddleware(thunk));

const persistor = persistStore(store);

const fetchFonts = () => {
  return Font.loadAsync({
    "open-sans-cond": require("./assets/fonts/OpenSansCondensed-Light.ttf"),
    "open-sans-cond-bold": require("./assets/fonts/OpenSansCondensed-Bold.ttf")
  });
};

const AppData = () => {
  const dispatch = useDispatch();

  const loadMovies = useCallback(async () => {
    await dispatch(fetchMovies());
  }, [dispatch]);

  useEffect(() => {
    loadMovies();
  }, loadMovies);

  return (
    null
  );
};

export default function App() {
  const [isFontLoaded, setIsFontLoaded] = useState(false);

  return (
    <Provider store={store}>
      <AppData />
      <PersistGate persistor={persistor}>
      {
        isFontLoaded
        ? (
          <Navigation />
        )
        : (
          <AppLoading startAsync={fetchFonts} onFinish={() => setIsFontLoaded(true)} />
        )
      }
      </PersistGate>
    </Provider>
  );
}

如何在React Native（expo app）中配置redux-persist

0 个答案: