Add new page

It is aa example of adding a static new page(no action) base on the boilerplate, there are 3 files which will be modified(or added).

blog

1. Create a Presentational Component ./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 promise 
newPage.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 field path: '/preload'`

...
  {
    path: '/preload',
    component: PreloadHelloWorld,
    initState: PreloadHelloWorld.initState
  },
...

Open browser with url localhost:3000/newpage

Clone

To get the finished repos

$ git clone https://github.com/wahengchang/react-redux-boilerplate/tree/addNewPage

Reference

https://github.com/wahengchang/react-redux-boilerplate/tree/addNewPage