在应用程序启动时重置减速器状态,同时使用 redux-persist 保持状态
Posted
技术标签:
【中文标题】在应用程序启动时重置减速器状态,同时使用 redux-persist 保持状态【英文标题】:reset reducer state when application start while have persist state using redux-persist 【发布时间】:2021-02-03 06:36:39 【问题描述】:我正在使用 redux-persist 和异步存储在我的 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,
;
...
以这种方式加载动画效果很好。 如果应用程序在请求进行时关闭,并且加载状态仍然为真,因为没有分派 LOGIN_FAILURE 或 LOGIN_SUCCESS 操作,则会出现问题, 下次打开应用程序时,加载状态为 true 并出现加载动画 我研究了一些解决方案,例如在启动 persist/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'],
...
有没有更好的方法来解决这种情况 谢谢
【问题讨论】:
【参考方案1】:您可以使用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);
;
【讨论】:
感谢您的回复,真的很有帮助。以上是关于在应用程序启动时重置减速器状态,同时使用 redux-persist 保持状态的主要内容,如果未能解决你的问题,请参考以下文章
可以使用 QSettings 或其他类在每次启动时存储一些设置(但在启动之间重置)?