Это пример добавления статической новой страницы (без действий-диспетчеризации) на основе изоморфного шаблона react-redux, после подключения конфигураций рендеринга сервера, рендеринга клиента и маршрутизатора только 3 файла будут изменены (или добавлены ) для создания очень простой статической страницы.

1. Создайте презентационный компонент

Компоненты представления - это компонент, который заботится только о том, как все выглядит, и не имеет зависимости от остальной части приложения.

./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. Создайте контейнер как запись роутера.

./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. Добавьте правильный конфиг в matchConfig.js

Новая страница создается с новым URL /preload', as the first fieldpath: '/ preload'`

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

Откройте браузер с URL-адресом localhost:3000/newpage

Клонировать

Репозиторий Git

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

Ссылка:

"Подробнее"

Https://hackernoon.com/isomorphic-universal-boilerplate-react-redux-server-rendering-tutorial-example-webpack-compenent-6e22106ae285

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

Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсудить рекламные и спонсорские возможности.

Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!