Redux сохраняются, данные не сохраняются - PullRequest
Новая
       33

Redux сохраняются, данные не сохраняются

0 голосов
/ 11 июля 2019

Я использую redux-persist, мои данные сохраняются, но перезаписываются VIDEOS_SUCCESS при запуске моего приложения. Как я могу предотвратить это и сохранить мои данные?

Редуктор: 

case "VIDEOS_SUCCESS": {
    const { data } = action;
    let videos = [];
    let questions = [];
    data.map(item => {
        const {
            id,
            title: { rendered: title },
            content: { rendered: description },
            youtubeVideo,
            ...
            icon
        } = item;

        const newVideo = {
            id,
            title,
            preview: trimText(description, 100),
            description,
            youtubeVideo,
            bookMarked: false,
            ...
            current: 0,
            correctScore: 5,
            totalScore: 50,
            results: {
                score: 0,
                correctAnswers: 0
            },
            completed: false,
            icon
        };

        videos.push(newVideo);
    });

    return videos;
}

Магазин: 

import { createStore, applyMiddleware } from "redux";
import { persistStore, persistReducer, autoRehydrate } from "redux-persist";
import storage from "redux-persist/lib/storage";
import thunk from "redux-thunk";

import logger from "redux-logger";
import rootReducer from "../reducers";

const persistConfig = {
    key: "root",
    storage: storage, 
    whitelist: ["videos"],
    timeout: null
};

const pReducer = persistReducer(persistConfig, rootReducer);

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

export default store;

Приложение: 

import { store, persistor } from "./config/configureStore";
import { PersistGate } from "redux-persist/integration/react";
import AppNavigator from "./navigation/AppNavigator";
import NavigationService from "./navigation/actions";

export default class App extends React.Component {
  render() {
    return (
      <ImageBackground
        source={require("./assets/images/TC_background.jpg")}
        style={styles.container}
      >
        <Provider store={store}>
          <PersistGate loading={null} persistor={persistor}>
            <AppNavigator
              ref={navigatorRef => {
                NavigationService.setTopLevelNavigator(navigatorRef);
              }}
            />
          </PersistGate>
        </Provider>
      </ImageBackground>
    );
  }
}

Я получаю свои данные из маршрута по умолчанию: 

import DrawerHeader from "../navigation/DrawerHeader";
class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const { fetchData } = this.props;
    fetchData();
  }

  render() {
    const { videos } = this.props;
    return (
      <View style={styles.container}>
        <HomeMenu {...this.props} />
      </View>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  fetchData: () => dispatch(fetchData())
});
const mapStateToProps = state => {
  return {
    videos: state.videos
  };
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(HomeScreen);

Мой регидрат работает, но VIDEO_SUCCESS nextState показывает начальные данные выборки.

enter image description here

Ответы [ 2 ]

0 голосов
/ 18 июля 2019

Если вы используете последнюю версию redux-persist, в этом нет необходимости.Поскольку Rehydrate () вызывается автоматически, пока вы сохраняете состояние (корневой редуктор). 

case "persist/REHYDRATE": {
    if (action && action.payload) {
        const {
            payload: { videos }
        } = action;
        return videos;
    }

    return [];

Но убедитесь, что ваше приложение упаковано в persistGate. 

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <RootComponent />
      </PersistGate>
    </Provider>
  );
};

Преобразованияпозволяют настраивать объект состояния, который сохраняется и повторно обрабатывается.Посмотрите на redux-persist документы, если вам нужна помощь с этим.

0 голосов
/ 11 июля 2019

Вы можете удалить эту строку. 

// check if state exists from persist, and return, otherwise fetch from
if (Array.isArray(state) && state.length > 0) {
    return state;
}
...