React Native with Redux-Persist,PersistGate inifinite loading

时间:2018-05-04 08:48:06

标签: javascript react-native redux native persist

我正在使用本地应用程序,并且必须使用Redux-Persist。我已经设置了商店配置,没有发生错误但是再也没有发生再水化,并且persistentGate无限地处于加载状态。

这是我的store.js

import { createStore, combineReducers } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import  entriesReducer from './reducers/entries';

import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const rootReducer = combineReducers({
    entries : entriesReducer
});

const persistConfig = {
    key: 'root',
    storage: storage,
    stateReconciler: autoMergeLevel2 // see "Merge Process" section for details.
   };

   const pr = persistReducer(persistConfig, rootReducer);


const configureStore = () => {
    const store = createStore(rootReducer);
    const persistor = persistStore(store);
    return { persistor, store };
  };

  export default configureStore;

我的index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import {Provider} from 'react-redux';
import App from './App';
import configureStore from './src/store/configureStore';
import { PersistGate } from 'redux-persist/lib/integration/react';

const store = configureStore();

const RNRedux = () => (
    <Provider store={store.store}>

    <PersistGate loading={<App />} persistor={store.persistor}>

        <App/>

    </PersistGate>
    </Provider>
);
AppRegistry.registerComponent('PTM', () => RNRedux);

任何帮助都将非常感激,我一直试图将其设置好几天,但没有成功。以前我不得不处理错误,但现在我没有看到它,它仍然拒绝工作,我根本不知道在哪里寻找错误。

编辑: App.js文件

import React from 'react';
import { View, Text, Button, StatusBar } from 'react-native';
import { StackNavigator } from 'react-navigation'; 
import {connect} from 'react-redux';

import NavBar from './src/components/NavBar/NavBar';
import DayPicker from './src/components/DayPicker/DayPicker';
import TotalTime from './src/components/TotalTime/TotalTime';

import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
import EntriesList from './src/components/EntriesList/EntriesList';


var x = null;

const RootStack = StackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    initialRouteName: 'Home',
  }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

我的HomeScreen正在使用它:

const mapStateToProps = state => {
      return {
        data : state.entries.data,
        entriesPerDay : state.entries.entriesPerDay, 
        pickedDate : state.entries.pickedDate,
        total: state.entries.total
      };
  };

  const mapDispatchToProps = dispatch => {
      return {
          onPickDate: (day) => dispatch(pickDay(day)),
          onDataSet: (data) => dispatch(setData(data))
      };
  };

  export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen);

0 个答案:

没有答案