Это пример добавления статической новой страницы (без действий-диспетчеризации) на основе изоморфного шаблона 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 field
path: '/ 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://github.com/wahengchang/react-redux-boilerplate/tree/addNewPage
Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсудить рекламные и спонсорские возможности.
Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!