React native 和 redux 仍然无法正常工作

Posted 2023-02-19

【中文标题】React native 和 redux 仍然无法正常工作

【英文标题】：React native and redux persist not working

【发布时间】：2018-06-02 06:57:20

【问题描述】：

我正在使用 redux-persist 将数据存储在我的 react-native 应用程序中。 这是代码：

store.js

import  createStore, compose, applyMiddleware  from 'redux';
import thunk from 'redux-thunk';
import 
  persistStore,
 persistCombineReducers,
 from 'redux-persist';
import  AsyncStorage  from 'react-native';
import  composeWithDevTools  from 'redux-devtools-extension';
import user from './reducers/user';
import auth from './reducers/auth';

const config = 
  key: 'root',
  storage: AsyncStorage,
;

const reducers = persistCombineReducers(config, 
  user,
  auth
);

export const configureStore = () => 
 const store = createStore(
  reducers,
   compose(
    applyMiddleware(thunk),
    )
  );
  const persistor = persistStore(store);

  return  persistor, store ;
;

然后在 App.js 我有这个：

const  persistor, store  = configureStore();
 const onBeforeLift = () => 
  // take some action before the gate lifts
  store.dispatch(startingApp());

return (
  <Provider store=store>
    <PersistGate
      loading=<HomeLoader />
      onBeforeLift=onBeforeLift
      persistor=persistor>
        <RootNav />
      </PersistGate>
  </Provider>

当我从 App.js componentDidMount 调度和操作时，一切正常。 问题是当我从组件触发操作时，例如，状态没有存储，所以当我重新启动应用程序时，状态就消失了。

我所做的只是调用动作并传递数据：

this.props.onSetAuthData(data.credentials);

我可以在控制台中看到状态已更新，但如果我重新启动应用程序，只会保存 App.js 中的操作创建的状态，而不是

也许这与 RootNav 组件有关？

也许我导出错误的减速器？ 我有 const user = (state = initialState, action = ) => 导出默认用户。 另一个减速器也一样： const auth = (state = initialState, action = ) => 导出默认身份验证。

然后我导出 combineReducers(auth, user)

这是错的吗？

【问题讨论】：

实际上我发现它根本没有持久化，因为我删除了 store.dispatch(startingApp());现在什么都没有坚持，无法理解我做错了什么。有什么帮助吗？

看起来我导出错误的减速器。

你使用的是哪个 redux-persist 版本？

【参考方案1】：

使用 Reacttotron 之类的工具来查看您的商店是否已持久化。

https://github.com/infinitered/reactotron

如果它已经持久化，则您的组件应等到应用启动时商店重新补水。有时我无法使用 redux persist 使用 persistgate 来等待持久存储重新水化。所以我在async componentWillMount 上将商店和持久化器设置为状态，然后在您的渲染中，检查商店是否不为空（null）并且已经重新水化，然后加载您的应用程序。

  constructor()
    super();
    this.state = store: null, persistor: null
  
  async componentWillMount () 
    const store = configureStore();
    this.setState( store: store.store )
    this.setState( persistor: store.persistor )
  
  render()
    return (
    if (this.state.store === null) 
      return (
        <View>
          <Text>Loading...</Text>
        </View>
        );
    
    <Provider store=this.state.store persistor=this.state.persistor>
          <RootNav />
    </Provider>

同时尝试将您的存储空间从 AsyncStorage 更改为 storage。

const config = 
  key: 'root',
  storage,
;

首先导入存储import storage from 'redux-persist/es/storage';

【讨论】：

我已经创建并尝试像这样只保留商店。但是从最近的应用程序中清除应用程序后，商店获得初始状态意味着我的状态没有保留在存储中。请告诉我会是什么问题。

【参考方案2】：

有时它会使用 persistConfig 中的键调用错误。尝试键：'primary'

const primary = 
key: 'root',
storage: AsyncStorage,
blacklist: [],
whitelist: ['user'],
;