reactjs - Redux 持久化，数据不持久化

问题描述

我正在使用，我的数据持续存在，但在我的应用程序启动时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_SUCCESSnextState 显示初始获取数据。

标签： reactjsreact-nativereact-reduxredux-persist

如果您使用的是最新版本的 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文档。

reactjs - Redux 持久化，数据不持久化

问题描述

解决方案

推荐阅读