2017-12-21 4 views
0

Hi Ich versuche redox-persist mit react-redux zu installieren, aber ich kann es nicht zum Laufen bringen. Ich erhalte die folgende Fehlermeldung:React-redux kann nicht mit redux-persist arbeiten

TypeError: _store2.default is not a function [Learn More] index.js:12:29

Wie ich das Setup haben jetzt:

store.js

import {applyMiddleware, createStore} from 'redux'; 
import {persistStore,persistCombineReducers} from 'redux-persist'; 
import storage from 'redux-persist/es/storage' // default: localStorage if web, AsyncStorage if react-native 

import { logger } from 'redux-logger'; 
import thunk from 'redux-thunk'; 
import promise from 'redux-promise-middleware'; 
import reducer from './reducers' 

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

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

const reducers = persistCombineReducers(config, {reducer}); 

export const configureStore =() => { 
    const store = createStore(reducers, middleware); 
    const persistor = persistStore(store); 
    return { persistor, store }; 
}; 

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {BrowserRouter} from 'react-router-dom'; 
import {Provider} from 'react-redux'; 
import Bootstrap from 'bootstrap/dist/css/bootstrap.css'; 
import './css/app.css'; 
import App from './containers/App'; 

import { PersistGate } from 'redux-persist/es/integration/react' 
import configureStore from './store'; 
const { persistor, store } = configureStore() 


ReactDOM.render(
    <Provider store={store} > 
    <PersistGate persistor={persistor}> 
    <BrowserRouter> 
     <App/> 
    </BrowserRouter> 
    </PersistGate> 
    </Provider>, 
    document.getElementById('root') 
); 

UPDATE 1

jetzt

Basierend auf Antwort des @ azium erhalte ich:

The above error occurred in the component: in Connect(App) (created by Route) in Route (created by withRouter(Connect(App))) in withRouter(Connect(App)) in Router (created by BrowserRouter) in BrowserRouter in PersistGate in Provider

Wenn es wie so von App.js Aufruf:

@withRouter 
@connect((store) => { 
    return { 
    isAuthenticated: store.auth.isAuthenticated, 
    }; 
}) 

Antwort

0

So nach einem wenig thinkering und Community-Hilfe I Es gelang mir, das Problem auf meine Reducer-Deklaration einzugrenzen. Ich erklärte Reducer in index.js mit Mähdrescherreducern, während redox-persist sagt, dass es nicht sein sollte.

Schluss index.js Code:

import user from './userReducer' 
import auth from './authReducer' 

export default ({ 
    user, auth 
}) 
2

Wenn Sie den Standard Export verwenden möchten Sie ändern müssen:

export const configureStore =() => { 
    const store = createStore(reducers, middleware); 
    const persistor = persistStore(store); 
    return { persistor, store }; 
}; 

zu:

export default() => { 
    const store = createStore(reducers, middleware); 
    const persistor = persistStore(store); 
    return { persistor, store }; 
}; 

oder:

const configureStore =() => { 
    const store = createStore(reducers, middleware); 
    const persistor = persistStore(store); 
    return { persistor, store }; 
}; 

export default configureStore; 

oder wenn Sie nicht wollen, Standardexport Änderung verwenden:

import configureStore from './store'; 

zu:

import { configureStore } from './store'; 
+0

Danke, ich versuchte es, aber nicht sagt "store" ist nicht definiert, wenn ich es nennen: @connect ((store) => { return { IsAuthenticated : store.auth.isAuthenticated, }; }) Check out update 1 – galgo