2017-06-07 32 views
0

Ich habe dies zu Tode gegooglet und es ist sehr klar, dass dies ein häufiges Problem ist, aber alle Lösungen, die ich gefunden habe, scheinen nicht zu meinem Fall passen.Reagieren: Redux Zustand im Router onEnter

Ich bin ein Anfänger reagiert und haben Sie den folgenden Code angenommen:

const App = { 
    path: 'app', 
    onEnter: function (nextState, replace) { 
     console.log("onEnter", nextState); 
     /* somehow listen for redux state 
     if (!state.auth.user) { 
      replace('/login') 
     } 
     */ 
    }, 
    getChildRoutes(partialNextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, [ 
       require('./routes/dostuff'), 
       require('./routes/domorestuff'), 
      ]) 
     }) 
    }, 
    getComponent(nextState, cb) { 
     require.ensure([], (require) => { 
      cb(null, require('./components/AppLayout')) 
     }) 
    } 
}; 

module.exports = App; 

Gemäß dem Kommentar im onEnter ich vor dem Eintritt in diesem Weg authentifizieren müssen, aber ich bin nicht sicher, wie dies zu tun.

Ich habe versucht, die folgenden:

const mapStateToProps = (state) => { 
    return { 
     user: state.auth.user 
    } 
}; 

module.exports = connect(
    mapStateToProps 
)(App); 

aber diese erzeugt „nicht erfasste Fehler:. Sie eine Komponente an die Funktion von connect zurück passieren muss Stattdessen erhalten {“ Pfad „:“ app „}“

Der folgende Code wird verwendet, um die App und Speicher erstellen Bootstrap:

import React from 'react'; 
import {render} from 'react-dom'; 
import {createStore, applyMiddleware} from 'redux'; 
import {Provider} from 'react-redux'; 
import {applyRouterMiddleware, Router, Route, hashHistory, IndexRedirect, Redirect} from 'react-router'; 
import {syncHistoryWithStore, routerMiddleware} from 'react-router-redux'; 
import reducers from './reducers'; 

const middleware = routerMiddleware(hashHistory); 
const store = createStore(
    reducers, 
    applyMiddleware(middleware) 
); 

const history = syncHistoryWithStore(hashHistory, store); 

function scrollToTop() { 
    window.scrollTo(0, 0); 
} 

const rootRoute = { 
    childRoutes: [{ 
     path: '/', 
     component: require('./containers/App'), 
     indexRoute: {onEnter: (nextState, replace) => replace('/login')}, 
     childRoutes: [ 
      require('./routes/forgotPassword'), 
      require('./routes/login'), 
      { 
       path: '*', 
       indexRoute: {onEnter: (nextState, replace) => replace('/404')}, 
      } 
     ] 
    }] 
}; 

render(
    <Provider store={store}> 
     <Router 
      onUpdate={scrollToTop} 
      history={history} 
      routes={rootRoute} 
     /> 
    </Provider>, 
    document.getElementById('app-container') 
); 

ich die folgenden Versionen verwenden:

012.351.
"react": "^15.5.4", 
"react-dom": "^15.5.4", 
"react-hot-loader": "^3.0.0-beta.6", 
"react-redux": "^5.0.5", 
"react-router": "^3.0.2", 
"react-router-redux": "^4.0.8", 
"redux": "~3.6.0", 

Jede Hilfe würde sehr geschätzt werden.

+0

Wo erstellen Sie Ihr Geschäft? –

+0

Welche Version von Reagieren Router verwenden Sie? Könntest du ein wenig mehr Code für den App-Kontext posten? Ich denke, ich habe eine Idee, aber ich bin mir nicht sicher, ob es für Ihren Fall gilt. –

+0

Danke. Ich habe die Frage bearbeitet, um hoffentlich die Informationen zu enthalten, die Sie benötigen. – bludginozzie

Antwort

0

Es ist möglich zu tun, was Sie wollen. Sie müssen den Store Ihrer App-Datei zugänglich machen und er ist derzeit nicht verfügbar. Die grundlegende Idee wäre, eine Funktion zu erstellen, die den Laden übernimmt und aussetzen:

function App(store) { 
    return { 
     path: 'app', 
     onEnter: function (nextState, replace) { 
      // here you can do stuff with your store, something like store.getState() 
      if (!state.auth.user) { 
       replace('/login') 
      } 
      */ 
     }, 
     getChildRoutes(partialNextState, cb) { 
      require.ensure([], (require) => { 
       cb(null, [ 
        require('./routes/dostuff'), 
        require('./routes/domorestuff'), 
       ]) 
      }) 
     }, 
     getComponent(nextState, cb) { 
      require.ensure([], (require) => { 
       cb(null, require('./components/AppLayout')) 
      }) 
     } 
    } 
}; 

module.exports = App; 

und

const rootRoute = { 
    childRoutes: [{ 
     path: '/', 
     component: require('./containers/App')(store), 
     indexRoute: {onEnter: (nextState, replace) => replace('/login')}, 
     childRoutes: [ 
      require('./routes/forgotPassword'), 
      require('./routes/login'), 
      { 
       path: '*', 
       indexRoute: {onEnter: (nextState, replace) => replace('/404')}, 
      } 
     ] 
    }] 
}; 

Lassen Sie mich wissen, wie es geht!

+0

Großartig! Vielen Dank – bludginozzie

Verwandte Themen