web-dev-qa-db-ja.com

[RN] [Redux-Persist] AutoRehydrateは機能ではありません

redux-persist 5.5.0を使用しています。reactネイティブアプリをデバッグすると、ここにソースコード「autoRehydrate is not a function」というエラーが表示されます。助けてください

"use strict";

import thunk from "redux-thunk";
import analytics from "./analytics";
import array from "./array";
import promise from "./promise";
import reducers from "../reducers";
import { createLogger } from "redux-logger";
import { applyMiddleware, createStore, compose } from "redux";
import { persistStore, autoRehydrate } from "redux-persist";
import { ensureCompatibility } from "./compatibility";
import { AsyncStorage } from "react-native";

const isDebuggingInChrome = false;

const logger = createLogger({
    predicate: (getState, action) => isDebuggingInChrome,
    collapsed: true,
    duration: true
});

const middleware = applyMiddleware(thunk, promise, array, analytics, logger);

async function configureStore(onComplete: ?() => void) {
    const didReset = await ensureCompatibility();
    const store = createStore(reducers, { /* TODO: Initial state */  }, compose(middleware, autoRehydrate()));

    persistStore(store, { storage: AsyncStorage }, _ => onComplete(didReset));

    if (isDebuggingInChrome) {
        window.store = store;
    }
    return store;
}
reactjsreact-nativereduxpersist
10
JaeWang Lee

redux-persist 5.xではAPIが変更され、autoRehydrateは使用されなくなりました。以下は、現在redux-persistを使用している方法です。

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware, compose} from 'redux';
import {PersistGate} from 'redux-persist/lib/integration/react';
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import Thunk from 'redux-thunk';
import Router from './Router';
import reducers from './reducers';

const persistConfig = {
    key: 'root',
    storage: storage,
};
const persistedReducer = persistReducer(persistConfig, reducers);

const store = compose(persistedReducer, {}, composeEnhancers(applyMiddleware(Thunk)));

class App extends Component {
    render() {
        const persistor = persistStore(store);
        return (
            <Provider store={store}>
                <PersistGate persistor={persistor}>
                    <Router />
                </PersistGate>
            </Provider>
        );
    }
}

export default App;
16
Sagar Khatri

上記の方法を使用した場合、エラー：Object（...）is not a function come then then using using：const store = createStore（persistedReducer、applyMiddleware（thunk、logger））;

0
Aakarshit