翻译[11_src/src/home.jsx:114]中后部分

Author: BerlinChan

11_src/src/home.jsx

@@ -1,80 +1,76 @@
-// Tutorial 12 - Provider-and-connect.js
+// 教程 12 - Provider-and-connect.js
 
-// Our tutorial is almost over and the only missing piece to leave you with a good overview of Redux is:
-// How do we read from our store's state and how do we dispatch actions?
+// 我们的教程快结束了, 离对 Redux 有一个好的认识只差一步: 如何从 store 中的 state 读取, 和以及如何派发 actions?
 
-// Both of these questions can be answered using a single react-redux's binding: connect.
+// 这两个问题可以用 react-redux 的 connect 绑定一并解决。
 
-// As we previously explained, when using the Provider component we allow all components of our app to
-// access Redux. But this access can only be made through the undocumented feature "React's context". To
-// avoid asking you to use such a "dark" React API, React-Redux is exposing a function that you can use
-// on a component class.
+// 如我们之前解释的, 当使用 Provider 组件的时候, 我们允许应用中所有组件访问 Redux。
+// 但这个访问只能通过没有配备说明文档的功能 "React 的 context" 来完成。
+// 为了避开这如"黑魔法"般的 React API , React-Redux 暴露了一个函数, 这样你就能在组件的 类中使用它。
 
-// The function we're talking about is "connect" and it allows to literally connect your component with your Redux's store.
-// By doing so, it provides your store's dispatch function through a component's prop and also adds any
-// properties you want to expose as part of your store's state.
+// 我们讨论的这个函数就是 "connect" , 它能让我们用 Redux 的 store 字面值与组件连接上。
+// 这样一来, 它就能让你 store 中的 dispatch 函数通过组件的 props 传递,
+// 而且可以添加任何你想暴露的属性, 这些暴露的属性将作为你 store 中 state 的一部分。
 
-// Using "connect", you'll turn a dumb component into a smart component with very little code overhead
-// (https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0).
+// 使用 "connect", 能仅用很少的代码将一个笨拙组件 (dumb component) 转换成一个智能组件 (smart component)
+// 参见: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
 
 // "connect" is a function that takes as parameters few mapping functions and that returns a function expecting
-// the actual component class you want to connect. Such a function (connect) is called a Higher Order Component (HOC).
-// Higher Order functions comes from a functional pattern designed to add features / behaviors to
-// their inputs (component, store, ...) without using inheritance. This approach favors composition over inheritance
-// which is the prefered way to build React applications (actually this is not limited at all to React applications).
-// Read more about HOCs and composition here:
+// the actual component class you want to connect.
+// 这样一个函数(指 "connect") 被称之为高阶组件 (HOC, Higher Order Component)。
+// 高阶组件(译者注: 原文为 Higher Order functions, 可能写错了)来源于"函数设计模式", 这种设计可以在不使用继承的情况下向其添加功能与行为 (component, store, ...)
+// 这种方式有利于构造继承, 而且也是开发 React 应用的优先方法(但不是仅限的方法)。
+// 下面有更多关于高阶组件 (HOC) 与构造的文章:
 // - https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.lpp7we7mx
 // - http://natpryce.com/articles/000814.html
 
-// The "connect" HOC is designed to address all use-cases, from the most simple to the most
-// complex ones. In the present example, we're not going to use the most complex form of 'connect' but
-// you can find all information about it in the complete 'connect' API documentation here:
+// 高阶函数 "connect" 旨在解决所有, 从最简单到最复杂的使用情况。
+// 在本例中, 我们不会用 "connect" 做很复杂的事,
+// 但你可以去下面链接看看完整的 "connect" API 文档:
 // https://github.com/rackt/react-redux/blob/v4.0.0/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
 
-// Here is the complete 'connect' signature:
+// 这有个 "connect" 的完整用法:
 // connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
-// and here is how you're supposed to use it:
+// 这还有个你应该如何使用它:
 /*
   const wrappedComponentClass = connect(...)(ComponentClass)
 */
 
-// We will only focus here on the first 'connect' parameter: mapStateToProps...
+// 我们只关注这里 "connect" 的第一个参数: mapStateToProps...
 
-// "connect" takes, as its first parameter, a function that will select which slice of your
-// state you want to expose to your component. This function is logically called a "selector" and
-// receives 2 parameters: the state of your store and the current props of your component.
-// You'll see below that we named this function "mapStateToProps". This name is just a semantic name
-// for our function that clearly expresses what the function does: it maps (read "extracts some of")
-//  the state to a few component props.
-// The props of the component are also provided as arguments to handle common cases like extracting a slice of your
-// state depending on a prop value (Ex: state.items[props.someID]).
-// "mapStateToProps" is expected to return the props that you wish to expose to your component (usually via
-// an object literal). It's up to you to eventually transform the state you're receiving before returning it.
-// You can have a look right at that simplest 'connect' usage below (just after the component class definition).
+// "connect" 接收了一个参数, 该参数是个函数, 它用于将你想要暴露给组件的数据片段从 state 中选取出来。
+// 该函数逻辑上称之为 "selector", 它接收2个参数: 你 store 中的 state, 和当前组件的 props。
+// 如下面所示, 我们将该函数命名为 "mapStateToProps"。
+// 这个语义化的命名, 只是为了清晰表达该函数是用于: 将 state 映射(或解释为提取)到一些组件的 props 中。
+// 组件的 props 还作为参数来提供, 就像通常从基于 state 中的 props 中提取数据片段一样,
+// 例如: state.items[props.someID]。
+
+// "mapStateToProps" 应该返回你想要暴露给组件的 props (一般通过一个字面量对象)。
+// 这取决于在返回 state 时, 先转换接收到的 state。
+// 你可以看看下面 "connect" 的最简单用法(就在组件类的定义之后)。
 
 import React from 'react'
 import { connect } from 'react-redux'
-// We use the same ES6 import trick to get all action creators and produce a hash like we did with
-// our reducers. If you haven't yet, go get a look at our action creator (./action-creators.js).
+// 我们用 ES6 的 import 写法来获取所有的 action creator, 如同我们在 reducers 中那样。
+// 如果你还没看过我们的 action creator, 转到 ./action-creators.js 去看看。
 import * as actionCreators from './action-creators'
 
 class Home extends React.Component {
   onTimeButtonClick (delay) {
-    // This button handler will dispatch an action in response to a click event from a user.
-    // We use here the dispatch function "automatically" provided by connect in a prop.
-    // There are alternative ways to call actionCreators that are already bound to dispatch and those
-    // imply providing the second parameter to 'connect':
-    // https://github.com/rackt/react-redux/blob/v4.0.0/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
-    // The "delay" value given to actionCreators.getTime is a delay to simulate an async work being done before we
-    // are able to get the current time. Try to change this value to verify that the delay correctly impacts our UI.
+      // 当用户点击这个按钮的时候, 该句柄会派发一个action来响应。
+      // 这里我们使用的 dispatch 函数由 props 中的 connect "自动"提供。
+      // 还有多种其他的方法来调用已经绑定到 dispatch 中的 actionCreator, 这意味着可以向 "connect" 提供第二个参数:
+      // https://github.com/rackt/react-redux/blob/v4.0.0/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
+      // "delay" 的值传递给 actionCreators.getTime, 用于在获取当前时间之前模拟一次成功的异步操作。
+      // 尝试修改 delay 的值, 验证延迟是否正确影响了我们的 UI。
     this.props.dispatch(actionCreators.getTime(delay))
   }
   render () {
 
-    // Thanks to "connect", we're able to get specific selected data, through the props.
+      // 要感谢 "connect", 我们能够通过 props 来获取已选择的具体的数据
     var { frozen, time, reduxState } = this.props
     var attrs = {}
-    const DELAY = 500 // in ms
+    const DELAY = 500 // 单位: 毫秒
 
     if (frozen) {
         attrs = {
@@ -94,7 +90,7 @@ class Home extends React.Component {
           Try to change this value (in <b>src/home.jsx - line 95</b>) to verify that the delay given correctly impacts our UI.
         </i>
         <br />
-        {/* We register our button "onClick" handler here: */}
+        {/* 这里注册按钮的 "onClick" 句柄: */}
         <button { ...attrs } onClick={() => this.onTimeButtonClick(DELAY)}>Get time!</button>
         <pre>
           redux state = { JSON.stringify(reduxState, null, 2) }
@@ -104,14 +100,13 @@ class Home extends React.Component {
   }
 }
 
-// This is our select function that will extract from the state the data slice we want to expose
-// through props to our component.
+// 这个函数中, 我们将想通过 props 暴露给组件的数据片段从 state 中提取出来。
 const mapStateToProps = (state/*, props*/) => {
   return {
     frozen: state._time.frozen,
     time: state._time.time,
-    // It is very bad practice to provide the full state like that (reduxState: state) and it is only done here
-    // for you to see its stringified version in our page. More about that here:
+    // 像下面这样 (reduxState: state) 将整个 state 都提供出去不太好,
+    // 这里这样写只是给你看一下, 更多相关请见:
     // https://github.com/rackt/react-redux/blob/v4.0.0/docs/api.md#inject-dispatch-and-every-field-in-the-global-state
     reduxState: state,
   }
@@ -121,34 +116,33 @@ const ConnectedHome = connect(mapStateToProps)(Home)
 
 export default ConnectedHome
 
-// You might have noticed that thanks to redux, while we have a dynamic component that requires some state (to keep
-// the current time), this state is by no mean present inside the component. Our component only receives props with
-// needed data.
-// What we have here is called a stateless component. You should always try to have more stateless components (presented
-// above as dumb components) in your applications than stateful ones because they are much more reusable.
-// As suggested in "onTimeButtonClick" handler, we could even go further by passing our click callback as a prop
-// via "connect" second parameter "mapDispatchToProps". Doing so, we would extract our button behavior outside of
-// our component, making it even more reusable by allowing for a different click behavior.
-// Reusability might seem like a fancy overused concept but what having a reusable component also means, is that it's
-// one component that can be very easily tested (because you can then inject in your component whatever data and
-// test handlers you want and easily ensure its correct behavior).
+// 你也许注意到了, 正是要感谢 Redux, 在 state(当前时间下) 的驱动下我们有了动态的组件,
+// 该 state 在组件中并不扮演任何角色,
+// 我们的组件仅仅只接收 props 中需要的数据。
+// 这种组件称之为无状态的组件。在应用程序中你应该总是开发无状态的组件(如之前见过的的笨拙组件)。
+// 因为无状态组件具有更高的复用性。
+// 就像 "onTimeButtonClick" 句柄中建议的, 将点击回调通过 "connect" 的第二个参数 "mapDispatchToProps" 传递的时候, 我们可以做更多事情。
+// 如此这般, 我们就可以将按钮的行为提取出来, 通过替换不同的点击动作, 使之有更高的复用性。
+// 复用性似乎成了一个花哨且过度使用的概念, 但是可复用组件意味着, 它可以被很容易的测试, 因为你可以注入任何数据, 然后检查它是否处理正常, 确保它行为正确。
 
-// Before going to ./12_final-words.js, read this side-note about an alternative way to use "connect" HOC...
+// 在转到 ./12_final-words.js 之前, 请先阅读一下这个旁注: 如何使用 "connect" 连接高阶组件的另外一种方法...
 
-// Because connect(...) returns a function that accept a class and returns another class, you can use it as
-// an ES7 decorator if you want to. Decorators are an experimental ES7 features that make it possible to annotate
-// and modify classes and properties at design time (https://github.com/wycats/javascript-decorators).
+// 因为 connect(...) 返回2个东西: 接收一个类(class) 的函数, 和另外一个类(class),
+// 如果你愿意的话, 可以使用 ES7 的修饰器(Decorator) 方法来写。
+// 修饰器(Decorator) 是 ES7 中的实验性功能, 它使我们能在设计类与属性时对其进行修改,
+// 更多请见: https://github.com/wycats/javascript-decorators
 
-// This feature being experimental, it is subject to change and breakage. This means that by using it today, you must be
-// fully aware of and accept the uncertainty regarding its evolution. Decorators provide syntax sugar to write the
-// code above slightly differently. Instead of writing:
+// 该功能是实验性的, 它受制于语言标准的变化。
+// 这意味着, 如果你使用了它, 你必须当心和接受标准演进所带来的不确定性。
+// 修饰器提供了一个语法糖, 用它编码会和上面的代码有些小区别。
+// 以前这样写:
 
 /*
   class MyClass {}
   export default somedecorator(MyClass)
 */
 
-// You can write:
+// 现在这样写:
 
 /*
   @somedecorator