翻译5.6.7

Author: shenxl

05_get-state.js

@@ -68,6 +68,7 @@ var reducer_3 = function (state = {}, action) {
 
     switch (action.type) {
         case 'SAY_SOMETHING':
+            //return Object.assign({},state,{message: action.value})
             return {
                 ...state,
                 message: action.value
@@ -85,14 +86,27 @@ console.log('redux state after initialization:', store_3.getState())
 
 // Nothing new in our state so far since we did not dispatch any action yet. But there are few 
 // important things to pay attention to in the last example:
+// 
+// 目前在我们的state中没有任何事情发生，因为我们还没dispatch任何的action.但是在最后的例子中有几点需要注意一下。
+// 
 //     0) I assumed that our action contains a type and a value property. type property is mostly
 //        a convention in flux actions and the value property could have been anything else.
+//     0）我假定了我们的action中包含type与value属性。type属性在fulx约定里通常是存在的，但是value却可能是任何值。
+//     
 //     1) You'll see a lot the pattern involving a switch to respond accordingly
 //        to an action received in your reducers
+//     1）在你的reduces接受到action后，你会看到很多都是以 switch - case 的模式来做出响应
+//     
 //     2) When using a switch, NEVER forget to have a "default: return state" because 
 //        if you don't, you'll end up having your reducer return undefined (hence loosing your state).
+//     2）当使用switch时，不要忘记“default: return state” 。如果你不这么做，你会让你的reduce最终返回undefined
+//     （因此会失去state）
+//     
 //     3) Notice how we returned a new state made by merging current state with { message: action.value },
 //        all that thanks to this awesome ES7 notation (Object Spread): { ...state, message: action.value }
+//     3)关注一下我们是怎么返回一个新的状态，在其中合并了当前状态{message:action.value}，这都归功于ES7的记号（对象传播）：
+//        {..state,message:action.value}
+//     
 //     4) Note also that this ES7 Object Spread notation suits our example because it's doing a shallow
 //        copy of { message: action.value } over our state (meaning that first level property of state
 //        are completely overwritten - by opposition to gracefully merged - by first level property of
@@ -103,8 +117,17 @@ console.log('redux state after initialization:', store_3.getState())
 //        - using manual merge
 //        - or whatever other strategy that suits your needs and the structure of your state since
 //          Redux is absolutely NOT opinionated on this (remember, Redux is a state container).
+//     4) 请注意ES7的对象传播（Object Spread）特性是时候我们的示例的，因为他会将{message:action.value}浅复制到我们的state上。
+//     (意味着state第一级的属性将会被重写-{message:action.value}将被优雅的合并到state的第一级属性中）但是如果你有更复杂/深层嵌套的数据结构，
+//     你就需要根据state的不同更新需求做不同的处理。
+//        - 使用Immutable.js(https://facebook.github.io/immutable-js/)
+//        - 使用Object.assign(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+//        - 手动合并
+//        - 使用任何你认为合适的方式。Redux绝不会将某一方式制定为是规则。（要记住，Redux是状态容器）
 
 // Now that we're starting to handle actions in our reducer let's speak about having multiple reducers and
 // combining them.
+// 
+// 现在我们将要在reducer中处理actions了。
 
 // Go to next tutorial: combine-reducers.js

06_combine-reducers.js

@@ -44,9 +44,14 @@ var reducer_1 = function (state = {}, action) {
 
 // It become quite evident that a single reducer function cannot hold all our
 // application's actions handling (well it could hold it, but it wouldn't be very maintainable...).
+// 
+// 很明显，一个单独的reducer函数是不足以处理我们所有的actions(当然他可以全部容纳进来，但是却非常难以维护)
+
 
 // Luckily for us, Redux doesn't care if we have one reducer or a dozen and it will even help us to
 // combine them if we have many!
+// 
+// 幸运的是，Redux并不关心我们有几个reducer.甚至当我们有多个reducer时，他会帮助我们将这些reducer合并到一起
 
 // Let's declare 2 reducers
 
@@ -71,27 +76,41 @@ var itemsReducer = function (state = [], action) {
 
 // With this new multiple reducer approach, we will end up having each reducer to only handle
 // a slice of our application state.
+// 
+// 当发现有多个reducer时。我们最终也会使每个reducer处理应用状态的一部分。
 
 // But as we already know, just one single reducer function is expected by createStore.
+// 但是我们了解到，createStore函数只接受一个reducer函数
 
 // So how do we combine our reducers? and how do we tell Redux that each reducer will only handle
 // a slice of our state?
+// 那么我们要怎么组合我们的reducers呢？并且我们要怎么告知Redux每个reducer要处理哪一部分的state?
+// 
 // It's fairly simple. We use Redux combineReducers function helper. combineReducers take a hash and
 // return a function that when invoked, will call all our reducers, retrieve the state new slice and
 // reunite them in a state object (a simple hash {}) that Redux is holding.
 // Long story short, here is how you create a Redux instance with multiple reducers:
+// 这非常简单。我们可以使用Redux的combineReducer辅助函数。combineReducer接受一个hash对象，当调用后会
+// 返回一个函数。将会调用我们所有的reducers，获取新的一段state。最终将他们都返回并合并为一个新的object
+// (一个简单的hash{})让Redux继续保持。
+// 总而言之，这就是我们如何通过多个reducers来创建Redux实体。
+
 
 import { createStore, combineReducers } from 'redux'
 
 var reducer = combineReducers({
     user: userReducer,
     items: itemsReducer
 })
+
+console.log("Init by combineReducer");
+
 // Output:
 // userReducer was called with state {} and action { type: '@@redux/INIT' }
 // userReducer was called with state {} and action { type: 'a.2.e.i.j.9.e.j.y.v.i' }
 // itemsReducer was called with state [] and action { type: '@@redux/INIT' }
 // itemsReducer was called with state [] and action { type: 'i.l.j.c.a.4.z.3.3.d.i' }
+// 
 var store_0 = createStore(reducer)
 // Output:
 // userReducer was called with state {} and action { type: '@@redux/INIT' }
@@ -102,6 +121,10 @@ var store_0 = createStore(reducer)
 // to assure that a reducer will always return a state != 'undefined'.
 // Please note also that the first invocation of init actions in combineReducers share the same purpose
 // as random actions (to do a sanity check).
+// 通过output我们了解到，在初始化时，每个reducer都正确的调用了init action @@redux/INIT
+// 但是。如果另一个action到达后怎么去接收呢？在combineReducers中合理的进行了检查，以确保reducer总是返回一个不等于
+// 'undefined'的state.
+// 也请注意，当第一次调用CombineReducer时，除了调用init action,也一起调用了一个随机的action来完成合理性检查的目的。
 
 console.log('store_0 state after initialization:', store_0.getState())
 // Output:
@@ -113,8 +136,17 @@ console.log('store_0 state after initialization:', store_0.getState())
 //     user: {}, // {} is the slice returned by our userReducer
 //     items: [] // [] is the slice returned by our itemsReducer
 // }
+// 
+// 有趣的是，Redux确实是支持我们对reducer分段的，而且最终state合并了userReducer 与 itemsReducer的分段，并返回了一个完整的state
+// {
+//     user: {}, // {} is the slice returned by our userReducer
+//     items: [] // [] is the slice returned by our itemsReducer
+// }
 
 // We have by now a good idea of how reducers will work. It would be nice to have some
 // actions being dispatched and see the impact on our Redux state.
+// 
+// 我们现在对reducers的运行有了一个深入的了解，下面来看一下 当同一个actions被派发时，reducer是如何对
+// Redux产生影响的。
 
 // Go to next tutorial: dispatch-action.js

07_dispatch-action.js

@@ -1,7 +1,9 @@
 // Tutorial 7 - dispatch-action.js
 
 // So far we've focused on building our reducer(s) and we've not dispatched any of our own actions.
+// 目前为止我们只是关注与如何构建reducer(s)。并没有触发任何的action.
 // We'll keep the same reducers from our previous tutorial and handle few actions:
+// 现在，我们首先把上一节的reducers实现，并处理一些actions:
 
 var userReducer = function (state = {}, action) {
     console.log('userReducer was called with state', state, 'and action', action)
@@ -45,6 +47,8 @@ console.log('store_0 state after initialization:', store_0.getState())
 
 // Let's dispatch our first action... Remember in 'simple-action-creator.js' we said:
 //     "To dispatch an action we need... a dispatch function." Captain obvious
+// 让我们派发第一个action... 记住在'simple-action-creator.js'中我们说过：
+//      “派发action我们需要一个 dispatch 函数”    
 
 // The dispatch function we're looking for is provided by Redux and will propagate our action
 // to all of our reducers! The dispatch function is accessible through Redux