Redux 持久化，数据不持久化

Question

我正在使用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 显示初始提取数据。

Answer 1

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

Answer 2

您可以删除此行。

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