共用部分 客户端 服务端 先编译客户端在启动服务端 目录store
import React ,{useState} from 'react' import {connect} from 'react-redux' import {getIndexList} from '../store/index' const Index = (props) => { let [count,setCount] = useState(1) return ( <div> <h1>服务端渲染</h1> <h1>{count}</h1> <button onClick={()=>{props.getIndexList()}}>加载</button> <button onClick={()=>{setCount(count+1)}}>增加</button> { props.list.map(item=><li key={item.id}>{item.name}</li>) } </div> ) } Index.load = (store) => { return store.dispatch(getIndexList()) } export default connect( state => ({list:state.index.list}), {getIndexList} )(Index) import React from 'react' import ReactDOM from 'react-dom' import {BrowserRouter} from 'react-router-dom' import {Provider} from 'react-redux' import {getClientStore} from '../store/store' import {Route,Link} from 'react-router-dom' import routers from '../router' const store = getClientStore() const App = ()=>{ return ( <Provider store={store}> <BrowserRouter> <div> <Link to="/">首页</Link> <Link to="/login">登录</Link> </div> {routers.map(route=><Route {...route}/>)} </BrowserRouter> </Provider> ) } ReactDOM.hydrate( <App/> ,document.getElementById('root')) import express from 'express' import React from 'react' import {renderToString} from 'react-dom/server' // 专门在server端使用的 import {StaticRouter} from 'react-router-dom' import {Provider} from 'react-redux' import {getStore} from '../store/store' import {Route,Link} from 'react-router-dom' import {matchRoutes} from 'react-router-config' import routers from '../router' let store = getStore() let app = express() app.use(express.static('public')) app.get('*',function(req,res){ // 遍历所有的路由 寻找有load方法的 const matchedRoutes = matchRoutes(routers,req.path) let promises = [] matchedRoutes.forEach(item=>{ let {load} = item.route.component if(load){ const promise = new Promise((resolve,reject)=>{ load(store).then(resolve).catch(reject) }) promises.push(promise) } }) Promise.all(promises).then(()=>{ let content = renderToString( <Provider store={store}> <StaticRouter> <div> <Link to="/">首页</Link> <Link to="/login">登录</Link> </div> {routers.map(route=><Route {...route}/>)} </StaticRouter> </Provider> ) const html = ` <html> <head> <title>软谋教育</title> </head> <body> <div id="root">${content}</div> <script> window._context = ${JSON.stringify(store.getState())} </script> <script src="/main.js"></script> </body> </html> ` res.send(html) }) }) app.listen(1000,()=>{console.log('监听1000端口成功'); }) "scripts": { "dev:server": "webpack --config webpack.server.js --watch", "dev:start": "nodemon --watch build --exec node "./build/bundle.js"", "dev:client": "webpack --config webpack.client.js --watch" }, import axios from 'axios' const GET_LIST = 'INDEX/GET_LIST' // action const changeList = list => ({ type:GET_LIST, list }) // 有一个请求 可以改变reducer export const getIndexList = ()=>{ return (dispatch)=>{ return axios.get('https://xxxxxxxxxxx').then((res)=>{ const {list} = res.data dispatch(changeList(list)) }) } } const initState = { list:[] } export default (state = initState,action) => { switch(action.type){ case GET_LIST: const newState = { ...state, list:action.list } return newState default: return state } }
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
