我正在使用redux-persist和async存储将数据持久保存在我的react-native-application中。
这是我的redux商店的配置
import AsyncStorage from '@react-native-community/async-storage';
import {applyMiddleware, createStore} from 'redux';
import {composeWithDevTools} from 'redux-devtools-extension';
import {persistReducer, persistStore} from 'redux-persist';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';
import rootSaga from '../sagas';
const sagaMiddleware = createSagaMiddleware();
// Middleware: Redux Persist Config
const persistConfig = {
// Root
key: 'root',
// Storage Method (React Native)
storage: AsyncStorage,
// Whitelist (Save Specific Reducers)
whitelist: ['authReducer',],
// Blacklist (Don't Save Specific Reducers)
blacklist: [''],
};
// Middleware: Redux Persist Persisted Reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
// Redux: Store
const store = createStore(
persistedReducer,
composeWithDevTools(applyMiddleware(sagaMiddleware)),
);
sagaMiddleware.run(rootSaga);
// Middleware: Redux Persist Persister
let persistor = persistStore(store);
// Exports
export {store, persistor};
当我向服务器发出请求时，我使用三种类型的动作分派
LOGIN_REQUEST
LOGIN_SUCCESS
LOGIN_FAILURE
并在请求LOGIN_REQUEST上分派动作（将加载状态设置为true以加载动画并禁用登录按钮），在成功请求时分派LOGIN_SUCCESS动作，并在请求失败时将LOGIN_FAILURE设置为空（并将加载状态设置为false），这里是精简器
...
case LOGIN_SUCCESS: {
return {
...state,
user: action.payload,
loading : false
};
}
case LOGIN_REQUEST: {
return {
...state,
loading: true,
};
}
case LOGIN_FAILURE: {
return {
...state,
loading: false,
};
}
...
通过这种方式加载动画效果很好。
如果在请求进行过程中应用程序关闭并且加载状态仍然为true（因为未调度LOGIN_FAILURE或LOGIN_SUCCESS操作），问题就来了，下一次应用程序打开时，加载状态为true，并且加载动画出现了，我查看了一些解决方案，例如自动更新状态在开始时派遣的动作持续/ REHYDRATE，例如
...
case "persist/REHYDRATE": {
return {
...state,
loading : false
};
}
...
要么
黑名单状态，如reducerName.loading之类
...
storage: AsyncStorage,
// Whitelist (Save Specific Reducers)
whitelist: ['authReducer',],
// Blacklist (Don't Save Specific Reducers)
blacklist: ['authReducer.loading'],
...
有没有更好的方法来解决这种情况，谢谢
您可以AppState用来检查并禁用加载。
import {AppState} from 'react-native';
useEffect(() => {
AppState.addEventListener("change", _handleAppStateChange);
return () => {
AppState.removeEventListener("change", _handleAppStateChange);
};
}, []);
const _handleAppStateChange = (nextAppState) => {
if (appState.current === 'active' && nextAppState.match(/inactive|background/)) {
//check if loading is true, set is to false if it is
}
appState.current = nextAppState;
setAppStateVisible(appState.current);
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句