0.5.0 • Published 8 years ago
rokot-react-router-redux v0.5.0
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
typingsinstalled:npm i typings -g
Getting Started
Installation
Install via npm
npm i rokot-react-router-redux --saveTypings
You will also need these ambient dependencies:
NOTE: you might already have some of these ambient dependencies installed!
typings install react redux -SAServer 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);