我们为何抛弃 Redux 拥抱 MobX #6538

lihaobhsfer · 2019-12-02T19:15:16Z

译文翻译完成，resolve #6526

ShupingHe · 2019-12-03T01:13:57Z

校对认领。

CoolRice · 2019-12-05T02:51:09Z

校对认领

fanyijihua · 2019-12-05T02:51:11Z

@CoolRice 妥妥哒 🍻

ShupingHe

翻译辛苦了~提了一点小建议，译者可以斟酌下

P.S. 译者东北的吧...

ShupingHe · 2019-12-07T07:08:23Z

TODO1/how-we-ditched-redux-for-mobx.md

    }
 }
 ```

-Oh yeah, we use TypeScript—it’s the cleanest, most intuitive, and friendly to all devs. How not to love it? We also use [Storybook](https://storybook.js.org/) for UI development, so we’d like to keep components as dumb as possible and do any wiring up at the highest level possible. Since we use [Next](https://nextjs.org/) for server-side rendering, that level would be the page components, which in the end are just plain old components residing in a designated **pages** folder and automatically mapped to URL requests by the runtime. So, if you have a `home.tsx `****file there, it will be automatically mapped to the `/home` route—bye bye goes `renderToString()`.
+没错，我们用 TypeScript —— 它是最简洁、最直观、对所有开发者最友好的语言。怎能不爱它呢？我们还使用 [Storybook](https://storybook.js.org/) 来做 UI 开发，所以我们希望让组件越傻瓜越好，在越高层级将其拼接起来越好。由于我们用 [Next](https://nextjs.org/) 做服务端渲染，那个层级就是页面组件，它们最终就仅仅是广为人知的位于指定 `pages` 目录中的组件，并在运行时自动映射到 URL 请求中。所以，如果你有一个 `home.tsx` 文件，它就会被自动映射到 `/home` 路由 —— 和 `renderToString()` 说再见吧。


所以我们希望让组件越傻瓜越好 => 所以我们希望让组件越基础越好

这里翻译成傻瓜感觉不太合适...我觉得基础好一些，可以在群里问下。

ShupingHe · 2019-12-07T07:09:01Z

TODO1/how-we-ditched-redux-for-mobx.md


-In React, when it comes to state management, Redux is the gold standard—it’s got over 40k stars on GitHub, has full TypeScript support, and big guys like Instagram use it.
+在 React 中，提到状态管理时，Redux 就是黄金法则 —— 它在 Github 上有 4w+ Star（截至英文原文发布时。截至本译文发布时已有 5w+ Star。），完全支持 TypeScript，并且向 Instagram 这样的大公司也用它。


向 => 像

错别字

ShupingHe · 2019-12-07T07:12:27Z

TODO1/how-we-ditched-redux-for-mobx.md


-The entity involved here is called a **“tag.”** Hence, when the user types in the search box, it searches for **tags.**
+这里涉及到的实体是**标签。**因此，当用户在搜索框中输入时，搜索框搜索的是**标签**


这里涉及到的实体是标签。

entity 翻译成实体感觉有点僵硬，删除不翻译会不会好点？这里涉及到的是标签。

ShupingHe · 2019-12-07T07:17:14Z

TODO1/how-we-ditched-redux-for-mobx.md


-## Confrontation: Redux
+## 配置：Redux


这里你看错了吧，不是configuration哦

ShupingHe · 2019-12-07T07:40:56Z

TODO1/how-we-ditched-redux-for-mobx.md


-MobX promises you one thing: to just let you do your work. It applies the principles of reactive programming to React components — yeah, ironically, React is not reactive out of the box. Unlike Redux, you can have multiple stores (i.e. `TagsStore`, `UsersStore`, etc.,) or a root store, and bind them to component props. It is there to help you in managing your state, but how you shape it is entirely up to you.
+MobX 保证了一件事：保证你做你的工作。它将响应式编程的原则应用于 React 组件 —— 没错，讽刺的是，React 并不是开箱即具备响应式特点的。不像 Redux，你可以有很多个 store（比如 `TagsStore`, `UsersStore` 等等），或者一个总的 store，将它们绑定于组件的 props 上。它帮助你管理状态，但是如何构建它，决定权在你手里。


MobX 保证了一件事：保证你做你的工作. => MobX 保证了一件事：让你专注于自己的工作

ShupingHe · 2019-12-07T07:44:52Z

TODO1/how-we-ditched-redux-for-mobx.md


-So the code is quite self-explanatory, but to clarify, the `inject` helper comes from MobX React integration; it’s the counterpart to Redux’s `connect` helper except that `mapStateToProps` and `mapDispatchToProps` are in a single function. The `Provider` component it’s also MobX, and it takes as many stores as you want which will be later passed on to the `inject` helper. Also, look at those beautiful, **beautiful** decorators—that’s how you configure your store. Any property decorated with `@observable `will notify bound components to re-render on change.
+代码相当清晰了，不过为了说明白，`inject` 帮助函数来自于 MobX React；它与 Redux 的 `connect` 帮助函数对标，除了它的 `mapStateToProps` 和 `mapDispatchToProps` 在一个函数当中。 `Provider` 组件也来自于 MobX，可以在里面放任意多个 store，它们都会被传递至 `inject` 帮助函数中。并且，快看看那些迷人的，**迷人的**装饰器 —— 就这样配置 store 就对了。所有用 `@observable` 装饰的实体都会通知被绑定的组件在发生改变后重新渲染。


除了它的 mapStateToProps 和 mapDispatchToProps 在一个函数当中。 => 只不过它的 mapStateToProps 和 mapDispatchToProps 在一个函数当中。

sunui · 2019-12-10T06:07:15Z

@CoolRice 别忘了校对呀

lihaobhsfer · 2019-12-13T22:35:02Z

@sunui 校对等待时间略长了，能否跳过直接发布？

lihaobhsfer · 2019-12-22T16:07:40Z

@sunui 校对等待时间略长了，能否跳过直接发布？

sunui · 2019-12-23T03:34:23Z

@CoolRice 延期过久，取消本篇校对

sunui

修改了一点东西发布前合并一下

lsvih · 2019-12-23T03:43:07Z

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

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

* Add translation * 根据第一次校对进行修改 * Update how-we-ditched-redux-for-mobx.md Co-authored-by: sun <[email protected]>

lihaobhsfer · 2019-12-27T23:15:12Z

@lsvih 译文已发布，链接：https://juejin.im/post/5e068fa551882512657bc16c
感谢！

Add translation

b7017b3

fanyijihua added the 校对认领 label Dec 2, 2019

fanyijihua mentioned this pull request Dec 2, 2019

我们为何抛弃 Redux 拥抱 MobX #6526

Closed

lihaobhsfer changed the title ~~Add translation~~ 我们为何抛弃 Redux 拥抱 MobX Dec 2, 2019

lsvih added 前端正在校对 labels Dec 3, 2019

fanyijihua removed the 校对认领 label Dec 5, 2019

ShupingHe reviewed Dec 7, 2019

View reviewed changes

根据第一次校对进行修改

9df5f2f

sunui removed the 正在校对 label Dec 23, 2019

Update how-we-ditched-redux-for-mobx.md

166ff1b

sunui approved these changes Dec 23, 2019

View reviewed changes

sunui added the 翻译完成 label Dec 23, 2019

sunui assigned lsvih Dec 23, 2019

lsvih approved these changes Dec 23, 2019

View reviewed changes

lsvih merged commit a8c7fca into xitu:master Dec 23, 2019

evanzme pushed a commit to evanzme/gold-miner that referenced this pull request Dec 27, 2019

我们为何抛弃 Redux 拥抱 MobX (xitu#6538)

7661202

* Add translation * 根据第一次校对进行修改 * Update how-we-ditched-redux-for-mobx.md Co-authored-by: sun <[email protected]>

evanzme pushed a commit to evanzme/gold-miner that referenced this pull request Dec 27, 2019

我们为何抛弃 Redux 拥抱 MobX (xitu#6538)

1132641

* Add translation * 根据第一次校对进行修改 * Update how-we-ditched-redux-for-mobx.md Co-authored-by: sun <[email protected]>

lsvih removed their assignment Jul 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

我们为何抛弃 Redux 拥抱 MobX #6538

我们为何抛弃 Redux 拥抱 MobX #6538

lihaobhsfer commented Dec 2, 2019

ShupingHe commented Dec 3, 2019 •

edited

Loading

CoolRice commented Dec 5, 2019

fanyijihua commented Dec 5, 2019

ShupingHe left a comment

ShupingHe Dec 7, 2019

ShupingHe Dec 7, 2019

ShupingHe Dec 7, 2019 •

edited

Loading

ShupingHe Dec 7, 2019

ShupingHe Dec 7, 2019

ShupingHe Dec 7, 2019

sunui commented Dec 10, 2019

lihaobhsfer commented Dec 13, 2019 •

edited

Loading

lihaobhsfer commented Dec 22, 2019

sunui commented Dec 23, 2019

sunui left a comment

lsvih commented Dec 23, 2019

lihaobhsfer commented Dec 27, 2019


		In React, when it comes to state management, Redux is the gold standard—it’s got over 40k stars on GitHub, has full TypeScript support, and big guys like Instagram use it.
		在 React 中，提到状态管理时，Redux 就是黄金法则 —— 它在 Github 上有 4w+ Star（截至英文原文发布时。截至本译文发布时已有 5w+ Star。），完全支持 TypeScript，并且向 Instagram 这样的大公司也用它。


		The entity involved here is called a “tag.” Hence, when the user types in the search box, it searches for tags.
		这里涉及到的实体是标签。因此，当用户在搜索框中输入时，搜索框搜索的是标签


		MobX promises you one thing: to just let you do your work. It applies the principles of reactive programming to React components — yeah, ironically, React is not reactive out of the box. Unlike Redux, you can have multiple stores (i.e. `TagsStore`, `UsersStore`, etc.,) or a root store, and bind them to component props. It is there to help you in managing your state, but how you shape it is entirely up to you.
		MobX 保证了一件事：保证你做你的工作。它将响应式编程的原则应用于 React 组件 —— 没错，讽刺的是，React 并不是开箱即具备响应式特点的。不像 Redux，你可以有很多个 store（比如 `TagsStore`, `UsersStore` 等等），或者一个总的 store，将它们绑定于组件的 props 上。它帮助你管理状态，但是如何构建它，决定权在你手里。


		So the code is quite self-explanatory, but to clarify, the `inject` helper comes from MobX React integration; it’s the counterpart to Redux’s `connect` helper except that `mapStateToProps` and `mapDispatchToProps` are in a single function. The `Provider` component it’s also MobX, and it takes as many stores as you want which will be later passed on to the `inject` helper. Also, look at those beautiful, beautiful decorators—that’s how you configure your store. Any property decorated with `@observable `will notify bound components to re-render on change.
		代码相当清晰了，不过为了说明白，`inject` 帮助函数来自于 MobX React；它与 Redux 的 `connect` 帮助函数对标，除了它的 `mapStateToProps` 和 `mapDispatchToProps` 在一个函数当中。 `Provider` 组件也来自于 MobX，可以在里面放任意多个 store，它们都会被传递至 `inject` 帮助函数中。并且，快看看那些迷人的，迷人的装饰器 —— 就这样配置 store 就对了。所有用 `@observable` 装饰的实体都会通知被绑定的组件在发生改变后重新渲染。

我们为何抛弃 Redux 拥抱 MobX #6538

我们为何抛弃 Redux 拥抱 MobX #6538

Conversation

lihaobhsfer commented Dec 2, 2019

ShupingHe commented Dec 3, 2019 • edited Loading

CoolRice commented Dec 5, 2019

fanyijihua commented Dec 5, 2019

ShupingHe left a comment

Choose a reason for hiding this comment

ShupingHe Dec 7, 2019

Choose a reason for hiding this comment

ShupingHe Dec 7, 2019

Choose a reason for hiding this comment

ShupingHe Dec 7, 2019 • edited Loading

Choose a reason for hiding this comment

ShupingHe Dec 7, 2019

Choose a reason for hiding this comment

ShupingHe Dec 7, 2019

Choose a reason for hiding this comment

ShupingHe Dec 7, 2019

Choose a reason for hiding this comment

sunui commented Dec 10, 2019

lihaobhsfer commented Dec 13, 2019 • edited Loading

lihaobhsfer commented Dec 22, 2019

sunui commented Dec 23, 2019

sunui left a comment

Choose a reason for hiding this comment

lsvih commented Dec 23, 2019

lihaobhsfer commented Dec 27, 2019

ShupingHe commented Dec 3, 2019 •

edited

Loading

ShupingHe Dec 7, 2019 •

edited

Loading

lihaobhsfer commented Dec 13, 2019 •

edited

Loading