Как мне настроить redux-persist в React Native (приложение expo) - PullRequest
Новая
       59

Как мне настроить redux-persist в React Native (приложение expo)

0 голосов
/ 26 октября 2019

Я бы хотел сохранить некоторые данные в приложении React Native, используя Redux-persist и AsyncStorage . Я пытался выяснить это по разным учебникам, но Экспо остается застрявшим , показывая сообщение «загрузка комплекта 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>
  );
}
...