It is an example of adding a static new page(no action-dispatch) base on the react-redux isomorphic boilerplate, after wire up the configurations of server rendering, client rendering and router, only 3 files will be modified(or added) for creating a very simple static page.
1. Create a Presentational Component
Presentational Components is component which are concerned with _how things look only, and h_ave no dependencies on the rest of the app
./src/components/NewPage.js
import React, { PropTypes } from 'react'
const NewPage = ({ onClick, message }) => {return (<div><h1>NewPage: { message }</h1></div>)}
NewPage.propTypes = {message: PropTypes.string.isRequired}
export default NewPage
2. Create a container as entry of router
./src/containers/NewPage.js
import { connect } from 'react-redux'import NewPage from '../components/NewPage'
const mapStateToProps = (state, ownProps) => {return {message: 'well behave !!!'}}
const mapDispatchToProps = (dispatch, ownProps) => {return {}}
const newPage = connect(mapStateToProps,mapDispatchToProps)(NewPage)
// initState is a function which is run before server, and keep consistency as a thunk middleware, and return a promisenewPage.initState = (store,req,res) => {return (dispatch, getState) => {return new Promise( (resolve, reject)=> {resolve ()})}}
export default newPage
3. Add the right config in matchConfig.js
The new page is created with new URL /preload', as the first fieldpath: '/preload'`
...{path: '/preload',component: PreloadHelloWorld,initState: PreloadHelloWorld.initState},...
Open browser with url localhost:3000/newpage
Clone
Git repository
$ git clone https://github.com/wahengchang/react-redux-boilerplate/tree/addNewPage
Reference:
https://github.com/wahengchang/react-redux-boilerplate/tree/addNewPage