Redux 有多棒？ #2003

ZiXYu · 2017-08-04T10:32:09Z

close #1970

Update Xitu

linhe0x0 · 2017-08-05T12:31:01Z

@ZiXYu 不需要保留英文原文。

linhe0x0 · 2017-08-06T08:49:08Z

@sunui 好的呢 🍺

MJingv · 2017-08-07T03:53:50Z

@sqrthree申请参与校对

linhe0x0 · 2017-08-07T03:54:51Z

@MJingv Hi，你有在我们译者群吗？

MJingv · 2017-08-07T09:09:07Z

TODO/whats-so-great-about-redux.md


 That’s the advice the Redux team will give you — and that’s the advice I give to my own team members: I tell them to avoid it until using setState becomes truly untenable. But I can’t bring myself to follow my own rules, ’cause there’s always *some* reason you want to use Redux. You might have a bunch of `set_$foo` actions, but setting any value *also *updates the URL, or resets some more transient value. Maybe you have a clear 1:1 mapping of state to UI, but you *also* want to have logging or undo.
+这是 Redux 开发团队给你的建议，也是我给我的开发团队成员的建议：除非使用 setState 难以解决问题，不然尽量避免使用 Redux。但是我不能让我自己也遵从我自己的规定，因为总是有*某些*原因让你想要使用 Redux。 可能你有一系列的 `set_$foo` 方法，而且设置这些值*也*会更新 URL，或者重设某些瞬态值。可能你有一些明确和 UI 一对一的状态值，但是你*也*希望纪录或者可以撤销它们。


可能你有一系列的 set_$foo 方法 =>可能你有一系列的 set_$foo 消息

@ZiXYu @sqrthree 校验完毕

calpa · 2017-08-08T11:41:36Z

@sqrthree 认领校对

linhe0x0 · 2017-08-08T11:41:40Z

@calpa 妥妥哒 🍻

linhe0x0 · 2017-08-08T11:43:00Z

校对者由 @sunui 更换为 @calpa

calpa · 2017-08-08T11:55:56Z

TODO/whats-so-great-about-redux.md


 It’s quite possible to *never* encounter the hard problems that Redux is particularly good at handling, particularly if you’re a junior on a team where those tickets go to the more senior engineers. Your experience of Redux is “that weird library everyone uses where you have to write everything three times.” Redux is simple enough that you *can *use it mechanically, without deep understanding, but that’s a joyless and unrewarding experience.
+其实很可能你根本*不会*遇到那些 Redux 特别擅长处理的难题，尤其如果你是一个队伍里的新人，这些问题基本上会交给更资深的工程师处理。你在 Redux 上累积的经验就是 “用着每个人都在用的垃圾库，把所写的代码都重复写上好几次”。 Redux 简单到你*可以*不深入理解也能机械地使用它，但是那是一种很无聊也没什么提高的体验。


『队伍』=>『团队』，『团队里的新人』比较好理解。

calpa · 2017-08-08T12:00:17Z

TODO/whats-so-great-about-redux.md


 Both the Redux team and the community are [strongly opposed to expanding Redux’s API surface area](https://github.com/reactjs/redux/issues/2295), but the current approach of gluing a bunch of tiny libraries together is tedious even for experts and incomprehensible for beginners. If Redux cannot expand to have built-in support for the common cases, it needs a “blessed” framework to take that place. [Jumpsuit](https://github.com/jumpsuit/jumpsuit) could be a good start — it reifies the concepts of “actions” and “state” into callable functions while still preserving their many-to-many nature — but the actual library doesn’t matter as much as the act of blessing itself.
+Redux 的开发组和社区都[强烈反对增加 Redux 的 API 数量]，但是现在将一堆小型开发库融合在一起的做法对于专家而言是乏味的，而对于新手而言是费解的。如果 Redux 不能内置一些小功能来对常见情况做一些支持，那么我们需要一个“更好”的框架在常见情况下来取代它。[Jumpsuit](https://github.com/jumpsuit/jumpsuit) 可以作为一个不错的开始 - 它将“action”和“state”的概念转化为了可调用的方法，同时保留了它们多对多的特性 - 但是事实上，这个库其实并不关心这个优化本身。


补上链接：强烈反对增加 Redux 的 API 数量

@ZiXYu @sqrthree 校验完毕

linhe0x0 · 2017-08-11T12:41:45Z

@ZiXYu 两位校对者都已经校对好了~ 可以来根据校对意见进行调整了哈 ┏ (゜ω゜)=☞

- remove english - modify translation as reviews

ZiXYu · 2017-08-12T02:30:00Z

@sqrthree 调整完毕，删除英文

MJingv · 2017-08-09T08:27:55Z

TODO/whats-so-great-about-redux.md

@@ -3,103 +3,154 @@
 > * 原文作者：[Justin Falcone](https://medium.freecodecamp.org/@modernserf)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/whats-so-great-about-redux.md](https://github.com/xitu/gold-miner/blob/master/TODO/whats-so-great-about-redux.md)
-> * 译者：
+> * 译者：[ZiXYu](https://github.com/ZiXYu)
 > * 校对者：


linhe0x0

文中所有的斜体请参考 wiki 中的排版要求替换为粗体表示，并建议在中文环境下阅读一下全文，调整一下语序不符合中文表达习惯和生硬的地方。

linhe0x0 · 2017-08-14T06:44:34Z

TODO/whats-so-great-about-redux.md


-Once we are ✨enlightened✨ a lot of us immediately forget what it felt like beforehand. We forget that our enlightenment came only through our own repeated failures and misunderstandings.
+旦我们开始✨接受别人的思想✨，我们中的很多人就会立刻忘掉自己之前的一些想法。我们忘记了我们的理解只能从我们自己一次又一次的失败和误解中获得。


旦我们开始?

linhe0x0 · 2017-08-14T06:46:31Z

TODO/whats-so-great-about-redux.md


-I think it’s interesting to contrast React and Redux because while React is a vastly more complicated piece of software and has a significantly larger API surface, it somehow feels easier to use and understand. The only absolutely necessary API features of react are `React.createElement` and `ReactDOM.render` — state, component lifecycle, even DOM events could have been handled elsewhere. Building these features into React made it more complicated, but they also made it *better*.
+我认为对比 React 和 Redux 是一件很有意思的事，因为 React 是广泛来说软件中更复杂的一部分，它有着明显更多 API 接口，同是它也在某种意义上更容易使用和理解。而 React 唯一必须的 API 接口是 `React.createElement` 和 `ReactDOM.render` - 状态，组件生命周期，甚至 DOM 事件可以在别的地方处理。React 中的这些特性让它变得更复杂，但是也让它变得更*出色*。


React 是广泛来说软件中更复杂的一部分？这不太符合中文的表达习惯吧。

linhe0x0 · 2017-08-14T06:46:42Z

TODO/whats-so-great-about-redux.md


-I think it’s interesting to contrast React and Redux because while React is a vastly more complicated piece of software and has a significantly larger API surface, it somehow feels easier to use and understand. The only absolutely necessary API features of react are `React.createElement` and `ReactDOM.render` — state, component lifecycle, even DOM events could have been handled elsewhere. Building these features into React made it more complicated, but they also made it *better*.
+我认为对比 React 和 Redux 是一件很有意思的事，因为 React 是广泛来说软件中更复杂的一部分，它有着明显更多 API 接口，同是它也在某种意义上更容易使用和理解。而 React 唯一必须的 API 接口是 `React.createElement` 和 `ReactDOM.render` - 状态，组件生命周期，甚至 DOM 事件可以在别的地方处理。React 中的这些特性让它变得更复杂，但是也让它变得更*出色*。


同是它也在？

linhe0x0 · 2017-08-14T06:48:06Z

TODO/whats-so-great-about-redux.md


-Object-Oriented programming, like functional programming, is a methodology, not a language feature. Some languages *support* this style better than others, or have a standard library that’s designed for the style, but if you’re sufficiently dedicated to the task, you can write in an object-oriented style in any language.
+**[1] 为什么要在 react / JS 和 OOP 之间做明显的区分？JavaScript 是面向对象的，但是不是基于类（class-based）的。 **


linhe0x0 · 2017-08-14T06:50:17Z

TODO/whats-so-great-about-redux.md

- The inversion of control described above ensures that the UI doesn’t need to be updated if the implementation of state transitions changes. Adding complex features like logging, undo or even time travel debugging are almost trivial. Integration tests are just a matter of testing that the right action is dispatched; the rest can be unit-tested.
- React’s component state is pretty clunky for state that touches multiple parts of your app, such as user info and notifications. Redux gives you a state tree thats independent of your UI to handle these cross cutting concerns. Furthermore, having your state live outside of the UI makes things like persistence easier — you only need to deal with serializing to localStorage or URLs in a single place.
- Redux’s titular “reducers” provide incredible flexibility for handling actions — composition, multiple dispatch, even `method_missing`-style parsing.
+- 上文中控制权限的转移保证了当状态转换的实现变化时， UI 并不需要更新。添加复杂的功能，例如记录日志，撤销操作，甚至是时光穿越调试 (time travel debugging)，将变得非常简单。集成测试只需要确认派发了正确的 actions 即可，剩下的测试都可以通过单元测试来完成。


『记录日志，撤销操作，甚至是...』=>『记录日志、撤销操作，甚至是...』

linhe0x0 · 2017-08-14T06:51:10Z

TODO/whats-so-great-about-redux.md

- The inversion of control described above ensures that the UI doesn’t need to be updated if the implementation of state transitions changes. Adding complex features like logging, undo or even time travel debugging are almost trivial. Integration tests are just a matter of testing that the right action is dispatched; the rest can be unit-tested.
- React’s component state is pretty clunky for state that touches multiple parts of your app, such as user info and notifications. Redux gives you a state tree thats independent of your UI to handle these cross cutting concerns. Furthermore, having your state live outside of the UI makes things like persistence easier — you only need to deal with serializing to localStorage or URLs in a single place.
- Redux’s titular “reducers” provide incredible flexibility for handling actions — composition, multiple dispatch, even `method_missing`-style parsing.
+- 上文中控制权限的转移保证了当状态转换的实现变化时， UI 并不需要更新。添加复杂的功能，例如记录日志，撤销操作，甚至是时光穿越调试 (time travel debugging)，将变得非常简单。集成测试只需要确认派发了正确的 actions 即可，剩下的测试都可以通过单元测试来完成。


『time travel debugging』一般翻译成『时光旅行调试』吧

linhe0x0 · 2017-08-14T06:53:34Z

TODO/whats-so-great-about-redux.md


-The truth is that I don’t know how to write, much less *teach*, “good Redux.” Every app I’ve worked on is full of these Redux antipatterns, either because I couldn’t think of a better solution myself or because I couldn’t convince my teammates to change it. If the code of a Redux “expert” is mediocre, what hope does a novice have? If anything, I’m just trying to counterbalance the prevailing “Redux all the things!” approach in the hope that they will be able to understand Redux on their own terms.
+事实是，我不知道如何写，更不要说*指导写*，“好的 Redux”。我曾经参与的每个 app 都充斥着 Redux 的反模式，因为我想不到更好的解决方案或者我无法说服我的队友来改变它。如果一个 Redux “专家” 写出来的代码也如此平庸，那我们还能指望一个新手怎么做呢？无论如何，我只是希望能够平衡一下现在大行其道的 “Redux 完成所有事” 解决方案，希望每个人都能在他们适用的情况下理解 Redux。


『指导写』后面不需要逗号。

1. 修改文章中斜体为粗体 2. 根据校对意见修改

ZiXYu · 2017-08-16T03:15:03Z

@sqrthree 更新完毕

linhe0x0

还有一个小问题呢

linhe0x0 · 2017-08-17T03:33:01Z

TODO/whats-so-great-about-redux.md


-*Footnotes:*
+**感谢 **[*Matthew McVickar*](https://medium.com/@matthewmcvickar)*, *[*a pile of moss*](https://medium.com/@whale_eat_squid)*, *[*Eric Wood*](https://medium.com/@eric_b_wood)*, *[*Matt DuLeone*](https://twitter.com/Crimyon)*, 和 *[*Patrick Thomson*](https://twitter.com/importantshock)* review 本文。*


linhe0x0 · 2017-08-21T08:08:02Z

@ZiXYu 已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接，方便及时添加积分哟。

…slate * 'master' of https://github.com/xitu/gold-miner: (178 commits) 🚀 添加文章『关于 React Router 4 的一切』到文章列表 🚀 添加文章『为什么我们渴求女性来设计 AI 』到文章列表 🚀 添加文章『如何在 Webpack 2 中使用 tree-shaking』到文章列表 🚀 添加文章『Redux 有多棒？』到文章列表 🚀 添加文章『别再使用图片轮播了』到文章列表 🚀 添加文章『将 Android 项目迁移到 Kotlin 语言』到文章列表 🚀 添加文章『巧用 ARKit 和 SpriteKit 从零开始做 AR 游戏』到文章列表别再使用图片轮播了 (xitu#2073) Update how-to-do-proper-tree-shaking-in-webpack-2.md (xitu#2100) 为什么我们渴求女性来设计 AI (xitu#2074) 如何在 webpack2 中使用 tree-shaking (xitu#2076) 怎么写出完美的错误消息 (xitu#2080) 巧用 ARKit 和 SpriteKit 从零开始做 AR 游戏 (xitu#2043) 将 Android 程序移植为 Kotlin 程序 (xitu#2039) Redux 有多棒？ (xitu#2003) 🚀 添加文章『函数式响应编程入门指南』到文章列表 🚀 添加文章『虚拟现实是如何改变用户体验的：从原型到设备的设计』到文章列表 ✨ Create angular-vs-react-which-is-better-for-web-development.md ✨ Create evolving-the-facebook-news-feed-to-serve-you-better.md ✨ Create why-context-value-matters-and-how-to-improve-it.md ...

ZiXYu added 4 commits July 28, 2017 14:08

Merge pull request #1 from xitu/master

027b83c

Update Xitu

Translate version 1.0

ca16bad

translate 1.1

b12f6f2

Translate 2.0

98282e3

linhe0x0 added the 校对认领 label Aug 4, 2017

linhe0x0 changed the title ~~Translate Finished~~ Redux 有多棒？ Aug 5, 2017

linhe0x0 mentioned this pull request Aug 5, 2017

Redux 有多棒？ #1970

Closed

linhe0x0 added the 前端 label Aug 5, 2017

linhe0x0 self-requested a review August 5, 2017 06:39

linhe0x0 added the 正在校对 label Aug 6, 2017

MJingv reviewed Aug 7, 2017

View reviewed changes

linhe0x0 removed the 校对认领 label Aug 8, 2017

calpa approved these changes Aug 8, 2017

View reviewed changes

Translate Finished

068644f

- remove english - modify translation as reviews

MJingv reviewed Aug 13, 2017

View reviewed changes

linhe0x0 requested changes Aug 14, 2017

View reviewed changes

Update

fd37523

1. 修改文章中斜体为粗体 2. 根据校对意见修改

linhe0x0 requested changes Aug 17, 2017

View reviewed changes

Update whats-so-great-about-redux.md

a53af92

linhe0x0 approved these changes Aug 21, 2017

View reviewed changes

linhe0x0 merged commit 82efed3 into xitu:master Aug 21, 2017

linhe0x0 added 翻译完成 and removed 正在校对 labels Aug 21, 2017

cdadar pushed a commit to cdadar/gold-miner that referenced this pull request Dec 8, 2017

Redux 有多棒？ (xitu#2003)

b9d3469

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Redux 有多棒？ #2003

Redux 有多棒？ #2003

ZiXYu commented Aug 4, 2017 •

edited by linhe0x0

Loading

linhe0x0 commented Aug 5, 2017

linhe0x0 commented Aug 6, 2017

MJingv commented Aug 7, 2017

linhe0x0 commented Aug 7, 2017

MJingv Aug 7, 2017

MJingv Aug 7, 2017

calpa commented Aug 8, 2017

linhe0x0 commented Aug 8, 2017

linhe0x0 commented Aug 8, 2017

calpa Aug 8, 2017

calpa Aug 8, 2017

calpa Aug 8, 2017

linhe0x0 commented Aug 11, 2017

ZiXYu commented Aug 12, 2017

MJingv Aug 9, 2017

linhe0x0 left a comment

linhe0x0 Aug 14, 2017

linhe0x0 Aug 14, 2017

linhe0x0 Aug 14, 2017

linhe0x0 Aug 14, 2017

linhe0x0 Aug 14, 2017

linhe0x0 Aug 14, 2017

linhe0x0 Aug 14, 2017

ZiXYu commented Aug 16, 2017

linhe0x0 left a comment

linhe0x0 Aug 17, 2017

linhe0x0 commented Aug 21, 2017


		That’s the advice the Redux team will give you — and that’s the advice I give to my own team members: I tell them to avoid it until using setState becomes truly untenable. But I can’t bring myself to follow my own rules, ’cause there’s always some reason you want to use Redux. You might have a bunch of `set_$foo` actions, but setting any value also updates the URL, or resets some more transient value. Maybe you have a clear 1:1 mapping of state to UI, but you also want to have logging or undo.
		这是 Redux 开发团队给你的建议，也是我给我的开发团队成员的建议：除非使用 setState 难以解决问题，不然尽量避免使用 Redux。但是我不能让我自己也遵从我自己的规定，因为总是有某些原因让你想要使用 Redux。可能你有一系列的 `set_$foo` 方法，而且设置这些值也会更新 URL，或者重设某些瞬态值。可能你有一些明确和 UI 一对一的状态值，但是你也希望纪录或者可以撤销它们。


		It’s quite possible to never encounter the hard problems that Redux is particularly good at handling, particularly if you’re a junior on a team where those tickets go to the more senior engineers. Your experience of Redux is “that weird library everyone uses where you have to write everything three times.” Redux is simple enough that you can use it mechanically, without deep understanding, but that’s a joyless and unrewarding experience.
		其实很可能你根本不会遇到那些 Redux 特别擅长处理的难题，尤其如果你是一个队伍里的新人，这些问题基本上会交给更资深的工程师处理。你在 Redux 上累积的经验就是 “用着每个人都在用的垃圾库，把所写的代码都重复写上好几次”。 Redux 简单到你可以不深入理解也能机械地使用它，但是那是一种很无聊也没什么提高的体验。


		Both the Redux team and the community are [strongly opposed to expanding Redux’s API surface area](https://github.com/reactjs/redux/issues/2295), but the current approach of gluing a bunch of tiny libraries together is tedious even for experts and incomprehensible for beginners. If Redux cannot expand to have built-in support for the common cases, it needs a “blessed” framework to take that place. [Jumpsuit](https://github.com/jumpsuit/jumpsuit) could be a good start — it reifies the concepts of “actions” and “state” into callable functions while still preserving their many-to-many nature — but the actual library doesn’t matter as much as the act of blessing itself.
		Redux 的开发组和社区都[强烈反对增加 Redux 的 API 数量]，但是现在将一堆小型开发库融合在一起的做法对于专家而言是乏味的，而对于新手而言是费解的。如果 Redux 不能内置一些小功能来对常见情况做一些支持，那么我们需要一个“更好”的框架在常见情况下来取代它。[Jumpsuit](https://github.com/jumpsuit/jumpsuit) 可以作为一个不错的开始 - 它将“action”和“state”的概念转化为了可调用的方法，同时保留了它们多对多的特性 - 但是事实上，这个库其实并不关心这个优化本身。


		Once we are ✨enlightened✨ a lot of us immediately forget what it felt like beforehand. We forget that our enlightenment came only through our own repeated failures and misunderstandings.
		旦我们开始✨接受别人的思想✨，我们中的很多人就会立刻忘掉自己之前的一些想法。我们忘记了我们的理解只能从我们自己一次又一次的失败和误解中获得。


		I think it’s interesting to contrast React and Redux because while React is a vastly more complicated piece of software and has a significantly larger API surface, it somehow feels easier to use and understand. The only absolutely necessary API features of react are `React.createElement` and `ReactDOM.render` — state, component lifecycle, even DOM events could have been handled elsewhere. Building these features into React made it more complicated, but they also made it better.
		我认为对比 React 和 Redux 是一件很有意思的事，因为 React 是广泛来说软件中更复杂的一部分，它有着明显更多 API 接口，同是它也在某种意义上更容易使用和理解。而 React 唯一必须的 API 接口是 `React.createElement` 和 `ReactDOM.render` - 状态，组件生命周期，甚至 DOM 事件可以在别的地方处理。React 中的这些特性让它变得更复杂，但是也让它变得更出色。


		Object-Oriented programming, like functional programming, is a methodology, not a language feature. Some languages support this style better than others, or have a standard library that’s designed for the style, but if you’re sufficiently dedicated to the task, you can write in an object-oriented style in any language.
		[1] 为什么要在 react / JS 和 OOP 之间做明显的区分？JavaScript 是面向对象的，但是不是基于类（class-based）的。


		The truth is that I don’t know how to write, much less teach, “good Redux.” Every app I’ve worked on is full of these Redux antipatterns, either because I couldn’t think of a better solution myself or because I couldn’t convince my teammates to change it. If the code of a Redux “expert” is mediocre, what hope does a novice have? If anything, I’m just trying to counterbalance the prevailing “Redux all the things!” approach in the hope that they will be able to understand Redux on their own terms.
		事实是，我不知道如何写，更不要说指导写，“好的 Redux”。我曾经参与的每个 app 都充斥着 Redux 的反模式，因为我想不到更好的解决方案或者我无法说服我的队友来改变它。如果一个 Redux “专家” 写出来的代码也如此平庸，那我们还能指望一个新手怎么做呢？无论如何，我只是希望能够平衡一下现在大行其道的 “Redux 完成所有事” 解决方案，希望每个人都能在他们适用的情况下理解 Redux。


		Footnotes:
		感谢 [Matthew McVickar](https://medium.com/@matthewmcvickar), [a pile of moss](https://medium.com/@whale_eat_squid), [Eric Wood](https://medium.com/@eric_b_wood), [Matt DuLeone](https://twitter.com/Crimyon), 和 [Patrick Thomson](https://twitter.com/importantshock)* review 本文。*

Redux 有多棒？ #2003

Redux 有多棒？ #2003

Conversation

ZiXYu commented Aug 4, 2017 • edited by linhe0x0 Loading

linhe0x0 commented Aug 5, 2017

linhe0x0 commented Aug 6, 2017

MJingv commented Aug 7, 2017

linhe0x0 commented Aug 7, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

calpa commented Aug 8, 2017

linhe0x0 commented Aug 8, 2017

linhe0x0 commented Aug 8, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

linhe0x0 commented Aug 11, 2017

ZiXYu commented Aug 12, 2017

Choose a reason for hiding this comment

linhe0x0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZiXYu commented Aug 16, 2017

linhe0x0 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

linhe0x0 commented Aug 21, 2017

ZiXYu commented Aug 4, 2017 •

edited by linhe0x0

Loading