Question

我正在将react-native与redux-persist一起使用，但似乎无法让我的存储持久保存到异步存储中。根据redux-persist github repo的说法，这可能与将AsyncStorage从react-native中删除有关，但是我似乎无法弄清楚需要解决的问题。

启动我的应用程序时，我在redux devtools中看到了动作persist/PERSIST和persist/REHYDRATE，但是异步存储中什么也没有存储。

我认为我已经按照redux-persist文档的说明设置了文件，但我想我缺少了一些东西。我对Redux还是相当陌生，所以我可能对一些基本的东西感到困惑。

我的Redux.config.js文件...

import React from 'react';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux'
import thunk from 'redux-thunk';
import { initialState } from './initialState';
import { puppyReducer } from './reducers/puppies/puppyReducer';
import { uiReducer } from './reducers/ui/uiReducer';
import { userReducer } from './reducers/user/userReducer';
import { contentReducer } from './reducers/content/contentReducer';
import { persistStore, persistReducer, persistCombineReducers } from 'redux-persist';
import storage from 'redux-persist/lib/storage'
import logger from 'redux-logger';
import Navigation from './Navigation.config';
import { PersistGate } from 'redux-persist/integration/react';

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

const rootReducer = {
    dogs: puppyReducer,
    ui: uiReducer,
    user: userReducer,
    content: contentReducer
};

const reducer = persistCombineReducers(persistConfig, rootReducer);

const persistedReducer = persistReducer(persistConfig, reducer);

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(persistedReducer, initialState, composeEnhancers(applyMiddleware(thunk), applyMiddleware(logger)));

const persistor = persistStore(store);

// Wrap the redux State Provider around the Main Navigation Stack
function StateWrapper() {
    return (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <Navigation />
            </PersistGate>
        </Provider >
    )
}

export default App = StateWrapper;

我希望这会在应用启动时加载我的持久状态，并随着我的redux状态更改而继续更新该持久状态。从目前的情况来看，我的状态正在更新，但是没有任何持久性。没有错误消息显示。

Answer 1

我使用AsyncStorage保留我的redux存储。我没有使用redux-persist的存储选项，而是从@react-native-community安装了AsyncStorage。只需确保您正确链接了依赖项即可。

然后在我的config.js文件中导入并使用AsyncStorage，如下所示。

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

const config = {
  key: 'primary',
  keyPrefix: '', // the redux-persist default `persist:` doesn't work with some file systems
  storage: AsyncStorage,
};

您的问题还可能与keyPrefix尝试将其设置为默认值以外的其他值有关。

Answer 2

尝试以下操作：

~~const reducer = persistCombineReducers（persistConfig，rootReducer）;~~

constpersistedReducer = persistReducer（persistConfig， ~~reducer~~ rootReducer ）;

Answer 3

这对我有用：

  //...
import {combineReducers} from 'redux';
import {persistReducer} from 'redux-persist';
const persistConfig = {
    key: 'root',
    storage: storage
}

const rootReducer = {
    dogs: puppyReducer,
    ui: uiReducer,
    user: userReducer,
    content: contentReducer
};
const persistedReducer = persistReducer(
  persistConfig,
  combineReducers(rootReducers)
);
//...

如何使用redux-persist在React Native中持久化Redux存储

3 个答案: