React Native 中的异步存储仅显示第一次保存的数据答案

【问题标题】：Async Storage in React Native showing only first time saved dataReact Native 中的异步存储仅显示第一次保存的数据
【发布时间】：2021-03-29 06:22:29
【问题描述】：

每次当 redux 存储中的数据发生更改时，我都会尝试将数据保存到异步存储中，但是当我尝试更新用户名并保存它时出现错误，然后我可以在应用程序打开时看到更改但是当我关闭应用程序并再次打开它时，它会显示我已更新的旧用户名。

例如，如果我当前的名称是“Aviansh”并且我已将其更新为“Anshu”，那么当应用程序打开时我会看到“Anshu”，但当我关闭应用程序并再次打开它时，我能够看到出乎意料的又是“Avinash”

在本地存储中保存数据的代码

import AsyncStorage from '@react-native-community/async-storage';

export const loadState = async () => {
  try {
    const serializedState = await AsyncStorage.getItem('socialReduxState');
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};


export const saveState = async (state) => {
  try {
    const serializedState = JSON.stringify(state);
    await AsyncStorage.setItem('socialReduxState', serializedState);
  } catch (err) {
    console.log('Error has occurred: ', err);
  }
}

Redux Store 中的代码

import { createStore, applyMiddleware } from 'redux';
// thunk allows multiple actions to be run together
import thunk from 'redux-thunk';

import rootReducer from './reducers';
import { loadState, saveState } from './localStorage';

// Get existing state from localStorage
const persistedState = {};
// Create Store with data
const store = createStore(
  rootReducer,
  persistedState,
  applyMiddleware(thunk)
);

// Listen for any changes to the state and update localStorage
store.subscribe(() => {
  saveState(store.getState());
});


export default store;

【问题讨论】：

你是真的加载了持久化的状态，还是真的只是用const persistedState = {};加载了一个空对象？
如何从 AsyncStore 加载之前的状态？这很重要。我应该建议您使用redux-persist 来存储redux 状态吗？你正在重建轮子
@NguyễnKhương 是的，我正在使用 Redux-persist，你能建议一种更好的方法来使用 React-persist 和异步存储
@DrewReese 我不知道我是如何加载的，你能给我一个想法，我如何每次都加载状态

标签： javascript reactjs react-native redux asyncstorage

【解决方案1】：

您在 cmets 中提到您使用 redux-persist，但在您发布的代码示例中，没有 redux-persist 设置 - 这就是您所缺少的。

如果您使用redux-persits，则无需手动从异步存储中保存/加载数据，只需仔细按照package readme 中的说明进行操作即可。

import { createStore, applyMiddleware } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import AsyncStorage from '@react-native-community/async-storage'
import thunk from 'redux-thunk'

import rootReducer from './reducers'

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = createStore(persistedReducer, {}, applyMiddleware(thunk))
const persistor = persistStore(store)
  
export { store, persistor }

// Then use the `persistor` in your root app component:

import { PeristGate } from 'reds-persist'
import { store, persistor } from './store'

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {... your root app component here ...}
      </PersistGate>
    </Provider>
  );
};

【讨论】：