Seite 4: Routen

Inhaltsverzeichnis

Routen einrichten

Routen werden in der Datei configs/routes.js konfiguriert:

export default {
    home: {
        path: '/',
        method: 'get',
        page: 'home',
        title: 'Home',
        handler: require('../components/Home')
    },
    ...
};

Die gezeigte Route würde für die Startseite (http://localhost3000/) die Home-Komponente (components/Home.js) laden und rendern. Die entsprechende Logik in der Application-Komponente sieht wie folgt aus:

import { handleHistory } from 'fluxible-router';

class Application extends React.Component {
    render() {
        const Handler = this.props.currentRoute.get('handler');
        return <Handler />;
    }
}

export default handleHistory(Application);

Die Higher-Order-Komponente handleHistory verwaltet den Browser History State und setzt eine Property currentRoute, die die Anwendung für das Laden des aktuellen Elements verwendet.

En Detail

Um auf der Seite zu navigieren und die Vorteile der Komponente nutzen zu können, gibt es zwei Möglichkeiten:

– NavigateAction: Die NavigateAction lädt eine neue Route und ändert die URL der Anwendung. Sie lässt sich zudem direkt aufrufen, um die URL entsprechend zu ändern.

import { NavigateAction } from 'fluxible-router';

context.executeAction(NavigateAction, { name: "home"  });
context.executeAction(NavigateAction, { url: "/path/to/site"  });

– NavLink: Wie ein normaler HTML-Link kommt auch die NavLink-Komponente zum Navigieren zum Einsatz. Ein Klick auf den Link führt intern zudem eine NavigateAction aus.

import { NavLink } from 'fluxible-router';

<NavLink href="home">Home</NavLink>
<NavLink routeName='user' navParams={{id: 1}}>User 1</NavLink>
 

Da in der Routendefinition eine Action angegeben wird, lassen sich schon vor dem Laden der Seite Daten an die Stores übergeben.

path: '/users/:id',
...
action: function (context, payload, done) {
    const id = payload.get('params').get('id');
    context.executeAction(loadUserProfile, { id: id }, done);
}

Die NavLink-Komponente kann auch im showProfile-Button eingebaut werden und wird dadurch noch simpler:

class Button extends React.Component {
     render() {
        return <NavLink routeName='user' navParams{
        {id:this.props.userId}}>Show Profile</NavLink>
    }
}

Der Aufruf, der die Nutzerdetails von der Twitter-API geladen hat, ist jetzt von der Komponente entkoppelt und befindet sich in der Datei routes.js:

user: {
    path: '/user/:id',
    method: 'get',
    page: 'user',
    title: 'User',
    handler: require('../components/User'),
    action: function (context, payload, done) {
        const id = payload.get('params').get('id');
        context.executeAction(loadUserProfile, { id: id }, done);
    }
}

Unter http://localhost:3000/user/1 ist nun die Profilseite des Users erreichbar. Da clientseitiges Routing zum Einsatz kommt, bleibt der Rest der Seite bis auf die neue Darstellung des Profils bestehen.

Der letzte offene Punkt ist die Funktion loadProfileFromTwitterAPI. Fluxible bietet mit dem Fetchr-Plug-in eine einfache Möglichkeit, um dem Client Services, die beispielsweise eine serverseitige Authentifizierung erfordern, über eine API zur Verfügung zu stellen.

Diese Dienste bieten eine einfache CRUD-Schnittstelle (create, read, update und delete) und werden wie folgt definiert:

import Twit from 'twit';

const T = new Twit(/* credentials */)

export default {
    name: 'user',
    read: function (request, resource, params, config, callback) {
        T.get('users/show', { user_id: params.id  }, function(error,
        profile){
            if (!error) {
                return callback(profile);
            }
            return console.log(error);
        });
    }
}

Die loadUserProfile-Action kann den Service über context.service.read aufrufen:

function loadUserProfile(context, payload, done) {
    context.service.read('user', payload, {}, function (err, user) {
        context.dispatch('RECEIVE_USER_PROFILE', user);
        done();
    });
}
export default loadUserProfile;

Führt der Client loadUserProfile aus, stellt das Programm automatisch eine GET-Request an die Server-API (Fetchr Plug-in). Ein Blick in die Netzwerkkonsole zeigt folgenden Aufruf:

Request: http://localhost:3000/api/users;user_id=1
Response: { id: 1, name: "...", ...}
 

Der Vorteil dieser Vorgehensweise zeigt sich etwa beim Verwenden der Twitter-API, denn sie erfordert eine serverseitige Authentifizierung.