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

Question

每当 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 商店中的代码

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;

Answer 1

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

如果您使用 redux-persits，则无需 save/load 手动从异步存储中获取数据，只需仔细按照 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>
  );
};

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

Async Storage in React Native showing only first time saved data

javascript

reactjs

react-native

redux

asyncstorage