构建React-Redux(后面就简称R/R)的时候,用户所看到的文件是从服务器端加载,这其中涉及到了React的虚拟渲染,Node.js服务器的使用,Node静态文件的加载.
整个流程参考使用React,Redux,redux-saga构建一个应用的代码.
下面我们先看看整个代码结构
首先我们按照readme.md文件的指示,npm start.
可以看到如下的结果：
AppledeMacBook-Pro:egghead-react-redux-image-gallery apple$ npm start
> egghead-react-redux-image-gallery@0.0.1 start /Users/apple/Public/Git_Bank/egghead-react-redux-image-gallery
> budo ./src/main.js:build.js --dir ./src --verbose --live -- -t babelify
[0000] info Server running at http://127.0.0.1:9966/ (connect)
[0000] info LiveReload running on 35729
解释，可以看到执行了npm start脚本以后会启动一个服务器,这个服务器使用的组件是budo,加载的代码是main.js.服务器启动的port：9966这个端口号十分的古怪.看到这里我看看里面到底是怎么使用以来项目,既然用了budo包,我们就在项目中使用关键词budo进行搜索,时间比较久,但是最终结果还是出来了
一个文件里面有我们需要的内容
/Users/apple/Public/Git_Bank/egghead-react-redux-image-gallery/node_modules/budo/lib/parse-args.js:
51
52 module.exports.defaults = {
53: title: 'budo',
54 port: 9966,
55 debug: true,
看就在这里定义了端口号,把它改成9988试试,没有问题.如果程序加载成功，说明当前的服务器的配置和依赖是正常的,如果看不到相关的代码,从初始化文件开始就可以一步一步找到相关的内容. 这里启动的是main.js文件,这只能时候是幕后推动者,我们在浏览器端看到的是index.html文件,对于这个文件,现在在编辑里看到的这个文件和你启动npm start是的index.html文件实际不是同一个东西,现在再文件夹里看到的这个文件只是相当于一个模板.直接在文件夹中点击这个文件的时候,浏览器中查看一下资源,发现最下面的bundle.js获取失败.没有经过服务端的browserify的打包,还没有生成这个文件.但是生成这个文件任务也没有完成.
budo启动的时候,browersify会把我们需要的R/R文件打包成bundle.js文件.稍后会启动一个静态文件的服务器.类似这样的node.js服务器
'use strict';
var
http = require( 'http' ),
express = require( 'express' ),
app = express(),
server = http.createServer( app );
// ------------- END MODULE SCOPE VARIABLES ---------------
// ------------- BEGIN SERVER CONFIGURATION ---------------
app.configure( function () {
app.use( express.bodyParser() );
app.use( express.methodOverride() );
app.use( express.static( __dirname + '/public' ) );
app.use( app.router );
});
app.configure( 'development', function () {
app.use( express.logger() );
app.use( express.errorHandler({
dumpExceptions : true,
showStack : true
}) );
});
app.configure( 'production', function () {
app.use( express.errorHandler() );
});
app.get( '/', function ( request, response ) {
response.redirect( ‘/index.html' );//默认首页文件的加载
});
// -------------- END SERVER CONFIGURATION ----------------
// ----------------- BEGIN START SERVER -------------------
server.listen( 3000 );
console.log(
'Express server listening on port %d in %s mode',
server.address().port, app.settings.env
);
// ------------------ END START SERVER --------------------
上面是一个express的静态文件的服务器,当这个服务器启动的时候,默认就会加载这个index.html文件.
当然打包以后成为bundle.js文件然后通过和css文件一样的方式直接路径导入也是可以的.两者唯一区别就是代码的打包过程.通过服务器端打包,js文件可以热更新,由于没有涉及到DOM的渲染工作,页面都不会有什么改变.
从服务器加载的index.html文件才是整个React项目的起点.如果把Redux看做是实现一个数据库,React的作用就是渲染出用户可以操作的界面(UI Component).所以加载index.html文件以后需要做两件事请,就是Redux的数据的初始化,也就是State的初始化工作.React的组件的渲染工作.UI组件的渲染是React的独门秘籍,很多资料都讲过,我就不说了.
我们主要看看Redux的数据初始化工作.
注意的代码是main.js,index.html
main.js
import "babel-polyfill"
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware } from 'redux'
import {Provider} from 'react-redux'
import createSagaMiddleware from 'redux-saga'
//import devTools from 'remote-redux-devtools'
import Gallery from './components/Gallery'
//import DevTools from './components/DevTools'
import reducer from './reducers'
import {watchLoadImages} from './sagas';
const store = createStore(
reducer,
applyMiddleware(createSagaMiddleware(watchLoadImages))
//DevTools.instrument(),
);
ReactDOM.render(
<Provider store={store}>
<Gallery />
</Provider>,
document.getElementById('root')
);
index.html
