在应用程序启动时重置减速器状态,同时使用 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 或其他类在每次启动时存储一些设置(但在启动之间重置)?

在 redux 连接的反应应用程序中未定义初始状态

重新启动后应用程序重置

EBS并发管理器启动失败,系统暂挂,在重置计数器之前修复管理程序

登录到控制台而不是减速器操作中的代理对象时如何查看状态?

在 Angular 中使用 ngrx 进行状态管理时,控制台记录状态数据