Requisiten an Komponenten übergeben, wenn das asynchrone Routing verwendet wird

Question

Ich verwende react-boilerplate, die asynchrone Aufrufe in route.js verwendet, um Komponenten zu liefern.

Die Komponente, die Lasten in den Pfad ‚/‘ wie folgt definiert ist:

const SPoints = ({ actions, loading, error, regions, selectedRegion, region, regionLoading }) => {

und die Komponente mit Werten aus dieser z.B. bevölkert region.name usw.

Die Routing-Code ist:

 
const getRootComponent = (nextState, cb) => { 
    import('containers/App') 
    .then(loadModule(cb)) 
    .catch(errorLoading); 
} 

export default function createRoutes(store) { 
    // create reusable async injectors using getAsyncInjectors factory 
    const { injectReducer, injectSagas } = getAsyncInjectors(store); 

    return [{ 
    path: '/', 
    name: 'SPoints', 
    getComponent(nextState, cb) { 
     getRootComponent(nextState, cb); 
    }, 
    indexRoute: { 
     getComponent(nextState, cb) { 
     const importModules = Promise.all([ 
      import('containers/SPoints/reducer'), 
      import('containers/SPoints/sagas'), 
      import('containers/SPoints'), 
     ]); 

     const renderRoute = loadModule(cb); 

     importModules.then(([reducer, sagas, component]) => { 
      injectReducer('spoints', reducer.default); 
      injectSagas(sagas.default); 

      renderRoute(component); 
     }); 

     importModules.catch(errorLoading); 
     } 
    } 
    } 

Wie sind die Requisiten, die SPoints empfängt an sie übergeben werden? Ich sehe nichts in dem Code, der es offensichtlich macht, wie das Bauteil seine Requisiten bekommt ...

Hmmm. Ich denke jetzt, dass das sagas.js, das importiert wird, Werte im redux Speicher einstellt, aber ich sehe noch nicht, wie diese Stützen geführt werden.

Answer 1

Kurz gesagt, die connect Komponente höherer Ordnung von react-redux liefert diese Requisiten aus dem Redux-Speicher.

Die Komponenten, auf die der Router zeigt, werden jedoch mit Requisiten vom react-router injiziert.

Hier sehen Sie einen der Beispielcontainer von react-boilerplate. Beachten Sie die connect-Funktion unten mit mapStateToProps und mapDispatchToProps, die genau das tut, wie es sich anhört: maps state- und dispatch-Aktionen an die Requisiten der zu verbindenden Komponente [an redux's store].

https://github.com/react-boilerplate/react-boilerplate/blob/master/app/containers/HomePage/index.js#L121

export function mapDispatchToProps(dispatch) { 
    return { 
    onChangeUsername: (evt) => dispatch(changeUsername(evt.target.value)), 
    onSubmitForm: (evt) => { 
     if (evt !== undefined && evt.preventDefault) evt.preventDefault(); 
     dispatch(loadRepos()); 
    }, 
    }; 
} 

const mapStateToProps = createStructuredSelector({ 
    repos: makeSelectRepos(), 
    username: makeSelectUsername(), 
    loading: makeSelectLoading(), 
    error: makeSelectError(), 
}); 

// Wrap the component to inject dispatch and state into it 
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);