React native Redux Persist-如何有条件地将存储持久化为react native

我想设置一个条件，要么完全保留/重新水化存储，要么不基于应用程序是否正在从错误中恢复

在顶级组件（app.js）中，我导入了store和persistor（来自MyStore.js），并将应用程序的其余部分包装到Provider和PersistGate中。存储在一个单独的文件中，因此它可以被一些共享逻辑文件导入和读取

当应用程序组件加载时，它会检查异步存储以查看是否正在从错误中恢复，并更新状态。我希望该状态确定存储是否持久化

我想听听你的建议

// ......... App.js:

componentDidMount = () => { this.checkForPreviousFatalError() }

checkForPreviousFatalError = async () => {
    var array = null
    try {
        array = await AsyncStorage.multiGet(['@lastFatalErrorEpoch', '@previousFatalErrorEpoch'])
    } catch(e) {
        console.log( "Unable to retrieve date of last 2 errors: " + e );
    }
    const lastError = array[0][1];
    const prevError = array[1][1];

    if ( lastError && prevError && parseInt(prevError) + 60000 > parseInt(lastError) ) {
        // do not persist store
    } else {
        // persist store
    };

}

render() {
    const waitingElement = (
        <ImageBackground source={require('./assets/signInBackground.jpg')} style={[ Styles.flexCenter, Styles.flexColumn, { height: "100%" }]}>
            <Text style={{ fontSize: 18, marginBottom: 20 }} >{ EnglishNA.RestoringLocalData }</Text>
            <Spinner size='large' flexZero={ true } color="white" />
        </ImageBackground>
    )

    return (
        <Provider store={ store }>
            <PersistGate loading={ waitingElement } persistor={ persistor }>
                <LogIn />
            </PersistGate>
        </Provider>
    )

}
}

// ....... MyStore.js

import ReduxThunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import ServerCall from './services/ServerCall';
import rootReducer from './reducers'; 
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

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

const pReducer = persistReducer(persistConfig, rootReducer);

export const store = createStore( pReducer, applyMiddleware( ReduxThunk, ServerCall ) );
export const persistor = persistStore(store);

/。。。。。。。。。App.js：
componentDidMount=（）=>{this.checkForPreviousFatalError（）}
checkForPreviousFatalError=async（）=>{
变量数组=null
试一试{
array=await AsyncStorage.multiGet（['@LastFatalErrorRepoch'，'@PreviousFatalErrorRepoch']））
}捕获（e）{
console.log（“无法检索最近2个错误的日期：+e”）；
}
const lastError=数组[0][1]；
const preveror=数组[1][1]；
if（lastError&&prevError&&parseInt（prevError）+60000>parseInt（lastError））{
//不要坚持存储
}否则{
//持久存储
};
}
render（）{
常量waitingElement=(
{EnglishNA.RestoringLocalData}
)
返回(
)
}
}
// ....... MyStore.js
从“redux thunk”导入redux thunk；
从“redux”导入{createStore，applyMiddleware}；
从“./services/ServerCall”导入ServerCall；
从“./reducers”导入rootReducer；
从“redux persist”导入{persistStore，persistReducer}；
从“redux persist/lib/storage”导入存储；
从“redux persist/lib/stateconciler/autoMergeLevel2”导入autoMergeLevel2；
常量persistConfig={
键：'根'，
存储：存储，
StateConciler:autoMergeLevel2//有关详细信息，请参阅“合并进程”部分。
};
const pReducer=persistReducer（persistConfig，rootReducer）；
export const store=createStore（pReducer、applyMiddleware（ReduxThunk、ServerCall））；
export const persistor=persistStore（存储）；

调用函数

检查以前的致命错误后，应配置存储。如果出现错误，请不要持久存储，也不要在存储中使用
persistReducer
。对于加载，可以使用组件状态

像这样：

const pReducer = persist
    ? persistReducer(persistConfig, rootReducer)
    : rootReducer;

App.js

// ......... App.js:
import configureStore from "./MyStore.js";

//....................

state = {
    isLoading: true,
    store: null
  };

componentDidMount = () => { this.checkForPreviousFatalError() }

checkForPreviousFatalError = async () => {
    var array = null
    try {
        array = await AsyncStorage.multiGet(['@lastFatalErrorEpoch', '@previousFatalErrorEpoch'])
    } catch(e) {
        console.log( "Unable to retrieve date of last 2 errors: " + e );
    }
    const lastError = array[0][1];
    const prevError = array[1][1];

    if ( lastError && prevError && parseInt(prevError) + 60000 > parseInt(lastError) ) {
         this.configureStore(false)
        // do not persist store
    } else {
       this.configureStore(true)
        // persist store
    };

}

configureStore = (persist) => {
    configureStore(persist, store => {
      this.setState({ isLoading: false, store });
    });
  }

render() {
    if (this.state.isLoading) {
      return <ImageBackground source={require('./assets/signInBackground.jpg')} style={[ Styles.flexCenter, Styles.flexColumn, { height: "100%" }]}>
            <Text style={{ fontSize: 18, marginBottom: 20 }} >{ EnglishNA.RestoringLocalData }</Text>
            <Spinner size='large' flexZero={ true } color="white" />
        </ImageBackground>;
    }

    return (
      <View style={{ flex: 1 }}>
        <Provider store={this.state.store}>
          <AppNavigator />
        </Provider>
        {this._renderStatusBarIos()}
        <MessageBar />
      </View>
    );
  }



如果要导出存储，请在MyStore.js中创建一个函数

export function getStore() {
  return store;
}

谢谢Mehran，一个问题。我将存储逻辑分离到它自己的文件中的原因是，我可以将存储导入到其他（非redux）组件中。在您建议的代码中，似乎不再导出store元素。“我读对了吗？”乔菲特回答道。如果有帮助，请向上投票并标记回答是否正确谢谢Mehran，我只需在MyStore中的configureStore函数上添加一个条件，用于它没有被持久化：if（doPersistStore）{persistStore（store，null，（）=>onComplete（store））；}else{onComplete（store）}
export function getStore() {
  return store;
}