koa-react-redux-server-render

#koa-react-redux-server-render

> react redux server render middleware for koa

* react-router服务器端处理.
* SEO的完美支持.
* 服务端store的数据加载.

安装

Install using npm:

``sh
npm install koa-react-redux-server-render --save
`

使用

$3

createRoutes.js
`js

import {Route, Router} from 'react-router'
import {Home,About} from './containers'

export default(history) => (




)
`

$3

app.use(reactReduxServerRender(routes,createStore,render)


| 参数 | 类型 | 说明 |
| --- | --- | --- |
| routes | Router | reacr-router的路由 |
| createStore() | Function | 创建store的function |
| render({__body,state,head}) | Function | 渲染react的处理方法，
* _body:解析后的React Component的StaticMarkup
state: 当前的store数据
head: 当前的头处理数据，比如title,meta等（目前使用的是react-helmet）|

使用example
`js

import Koa from 'koa'
import reactReduxServerRender from 'koa-react-redux-server-render'
import configureStore from '../src/store/configureStore'
import createMemoryHistory from 'history/lib/createMemoryHistory'
import createRoutes from '../src/routes'

const app=Koa()

// apply react server render
const history = createMemoryHistory()
app.use(reactReduxServerRender(createRoutes(history), () => {
return configureStore({}, history)
}, function* (models) {
yield this.render('index', models)
}))

`

$3

#### 1. React控件

`js

import React, {Component, PropTypes} from 'react'
import Helmet from 'react-helmet'

class Home extends Component {
render() {
return (


`
#### 2. render 处理

`html




{{head.title}}


{{head.meta}}














{{head.link}}





`

$3

> 在组建中实现static fetchData() -> Promise 方法

`js

class HomeConatiner extends Component {

static fetchData({store, params, location}) {
return store.dispatch(actions.fetchAll())
}

render() {
return (


``

具体使用可以参考 nicejs