翻译[11_src/src/home.jsx]、[11_src/src/server.js]完成

Author: BerlinChan

11_src/src/home.jsx

@@ -1,12 +1,13 @@
 // 教程 12 - Provider-and-connect.js
 
-// 我们的教程快结束了, 离对 Redux 有一个好的认识只差一步: 如何从 store 中的 state 读取, 和以及如何派发 actions?
+// 我们的教程快结束了, 离对 Redux 有一个好的认识只差一步:
+// 如何从 store 中的 state 读取, 和以及如何派发 actions?
 
 // 这两个问题可以用 react-redux 的 connect 绑定一并解决。
 
 // 如我们之前解释的, 当使用 Provider 组件的时候, 我们允许应用中所有组件访问 Redux。
 // 但这个访问只能通过没有配备说明文档的功能 "React 的 context" 来完成。
-// 为了避开这如"黑魔法"般的 React API , React-Redux 暴露了一个函数, 这样你就能在组件的 类中使用它。
+// 为了避开这如"黑魔法"般的 React API , React-Redux 暴露了一个函数, 这样你就能在组件的类中使用它。
 
 // 我们讨论的这个函数就是 "connect" , 它能让我们用 Redux 的 store 字面值与组件连接上。
 // 这样一来, 它就能让你 store 中的 dispatch 函数通过组件的 props 传递,
@@ -57,7 +58,7 @@ import * as actionCreators from './action-creators'
 
 class Home extends React.Component {
   onTimeButtonClick (delay) {
-      // 当用户点击这个按钮的时候, 该句柄会派发一个action来响应。
+      // 当用户点击这个按钮的时候, 该句柄会派发一个 action 来响应。
       // 这里我们使用的 dispatch 函数由 props 中的 connect "自动"提供。
       // 还有多种其他的方法来调用已经绑定到 dispatch 中的 actionCreator, 这意味着可以向 "connect" 提供第二个参数:
       // https://github.com/rackt/react-redux/blob/v4.0.0/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
@@ -149,26 +150,29 @@ export default ConnectedHome
   export default class MyClass {}
 */
 
-// Applying this syntax to redux connect, you can replace:
+// 在 Redux 的 connect 中使用修饰器语法, 可以用:
 
 /*
-  let mapStateToProps = (state) => { ... }
-  class MyClass {}
-  export default connect(mapStateToProps)(MyClass)
-*/
+ let mapStateToProps = (state) => { ... }
+ @connect(mapStateToProps)
+ export default class MyClass {}
+ */
 
-// by:
+// 替换:
 
 /*
   let mapStateToProps = (state) => { ... }
-  @connect(mapStateToProps)
-  export default class MyClass {}
+  class MyClass {}
+  export default connect(mapStateToProps)(MyClass)
 */
 
-// As you can see the application of the HOC function on the component class is now made implicit ( @connect(mapStateToProps) )
-// instead of calling it ourselves ( @connect(mapStateToProps)(Myclass) ). Some find this approach more elegant, others
-// dislike the fact that it's hiding what is really happening and many just don't get how decorators works. Knowing all that
-// and remembering that decorators are still experimental, you can now decide by youselves which "connect" usage you
-// prefer and you won't be suprised to find both syntax in the many articles, tutorials, starter kits, etc. out there.
 
-// Go to ./12_final-words.js for our last advice about what to do now...
+// 如你所见, 组件类中的高阶组件函数写法更加含蓄了:
+// @connect(mapStateToProps)
+// 而不是我们自己调用它:
+// @connect(mapStateToProps)(Myclass)
+// 有些人觉得这样写更优雅, 但有的人不喜欢, 因为这样隐藏了背后真正发生的事情, 或是不理解修饰器是如何工作的。
+// 记住, 修饰器目前为实验性功能, 如何使用 "connect" 取决于你自己,
+// 在别处的文章、教程、项目模版中, 常可以看到这两种语法。
+
+// 转到 ./12_final-words.js 去看我们最后的建议...

11_src/src/server.js

@@ -1,35 +1,32 @@
-// Tutorial 12 - Provider-and-connect.js
+// 教程 12 - Provider-and-connect.js
 
-// Hi there! So you're ready to play with Redux in a React app?
+// 终于到这里了! 准备好在 React 应用中使用 Redux 了吗?
 
-// The application you're about to see could not be more minimalist (from a product point of view
-// and from a design point of view - sorry for the black and white)... We'll only focus
-// on the use of 2 main bindings of react-redux (https://github.com/gaearon/react-redux):
-// 1) the Provider component
-// 2) the connect function
+// 你看到的这个应用程序例子已经精简的不能再精简了(对一个产品和设计来说的话)...
+// 我们只关注了使用 react-redux 中2个主要的绑定 (https://github.com/gaearon/react-redux):
+// 1) Provider 组件
+// 2) connect 函数
 
-// But before we get to that, let's see the basic setup of this application and how it
-// will be served to browser...
+// 但在开始下一步之前, 先看看为了使应用程序能在浏览器中访问到, 需要如何做一些基本设置。
 
-// We won't use Express (http://expressjs.com/) in this app since we don't really need
-// it to serve a simple html page.
+// 该应用中我们没有用 Express (http://expressjs.com/), 因为在一个如此简单的 HTML 页面中, 我们都不需要用到它。
 
-// "http" module will be used to create the http server
+// 这里我们使用 http 模块来创建一个 http 服务器
 import http from 'http'
 import React from 'react'
 
-// We create our main application server here. It will serve the same page on all URIs
-// so you won't find any route specific logic below (except for rejecting favicon request)
+// 这里创建应用程序主服务器。 它会伺服所有的 URI 到同一个页面上,
+// 所以这里并没有具体的路由逻辑, 除了一个拒绝 favicon 请求的代码。
 var server = http.createServer(function(req, res) {
 
-  // Forget this, it's just to avoid serving anything when the browser automatically
-  // requests favicon (if not, this server would send back an html page).
+  // 别管这个, 它仅仅用来取消浏览器对 favicon 的自动请求,
+  // 如果不这样做的话, 该服务器会返回一个 HTML 页面。
   if (req.url.match('favicon.ico')) {
     return res.end()
   }
 
-  // And of course, here is our Application HTML that we're sending back to the browser.
-  // Nothing special here except the URI of our application JS bundle that points to our
+  // 当然还有, 这里是我们应用程序返回给浏览器的 HTML。
+  // 没什么特别的, 除了将应用程序的 JS 包地址指定到
   // webpack dev server (located at http://localhost:5051)
   res.write(
     `<!DOCTYPE html>
@@ -49,6 +46,6 @@ var server = http.createServer(function(req, res) {
 
 export default server
 
-// Go to ./index.jsx, where our app is initialized. For those of you who are not familiar with webpack,
-// index.jsx is defined as the entry point (the first file) of our JS bundle (in 12_src/webpack.config.js)
-// and is automatically executed when the JS bundle is loaded in our browser.
+// 转到 ./index.jsx, 那是我们应用程序初始化的地方。
+// 为了让对 webpack 不熟悉的人更容易理解, 其实 index.jsx 是被定义(在 12_src/webpack.config.js中) 为 JS 包的入口 (首个文件)
+// 当 JS 包被载入到浏览器后, 它将被自动运行。