❤
npm
Sign UpSign In

rokot-react-router-redux
TypeScript icon, indicating that this package has built-in type declarations

0.5.0 • Public • Published

rokot-react-router-redux

Rokot - Rocketmakers TypeScript NodeJs Platform

Introduction

A typescript library for easily consuming react-router-redux from the server and the browser.

The Rokot platform components heavily rely on usage of the typings utility for typescript definitions management. If you don't have typings installed:

npm i typings -g

Getting Started

Installation

Install via npm

npm i rokot-react-router-redux --save

Typings

You will also need these ambient dependencies:

NOTE: you might already have some of these ambient dependencies installed!

typings install react redux -SA

Server Example

import * as express from "express";
import * as reducers from "./reducers";
import { ExpressServer } from "rokot-react-router-redux";
import { Home, Layout, Login } from "./views";
import { middlewares } from "./middleware";
 
var app = express();
app.use(ExpressServer.renderIsomorphic(reducers, appFactory, routeFactory, middlewares))
 
function appFactory(store: Redux.Store, child: JSX.Element): JSX.Element {
    return (
    <html lang="en">
            <head>
            </head>
            <body>
              <div id="host">
              {this.props.children}
              </div>
            </body>
          </html>
    )
}
 
function routeFactory(store: Redux.Store): JSX.Element {
    return (
        <Route path="/" component={Layout}>
            <IndexRoute component={Home}/>
            <Route path="/login" component={Login} />
        </Route>)
}
 

Browser Example

import * as reducers from "./reducers";
import { Browser } from "rokot-react-router-redux";
import { browserHistory } from "react-router";
import { Home, Layout, Login } from "./views";
import { middlewares } from "./middleware";
 
function routeFactory(store: Redux.Store): JSX.Element {
    return (
        <Route path="/" component={Layout}>
            <IndexRoute component={Home}/>
            <Route path="/login" component={Login} />
        </Route>)
}
 
Browser.render(reducers, routeFactory, middlewares, browserHistory);

/rokot-react-router-redux/

    Package Sidebar

    Install

    npm i rokot-react-router-redux

    Repository

    github.com/Rocketmakers/rokot-react-router-redux

    Homepage

    github.com/Rocketmakers/rokot-react-router-redux

    Weekly Downloads

    7

    Version

    0.5.0

    License

    MIT

    Last publish

    Collaborators

    • rocketmakers-admin
    • adamrocketmakers
    • joerocketmakers
    • rocketsoper
    Try on RunKit
    Report malware