SpaceAce 了解一下，一个新的前端状态管理库 #4296

noahziheng · 2018-08-12T11:20:36Z

译文翻译完成，resolve #4274

Hopsken · 2018-08-16T01:31:43Z

@leviding 校对认领

fanyijihua · 2018-08-16T01:31:47Z

@Hopsken 好的呢 🍺

Hopsken

翻译得很棒~赞👍

Hopsken · 2018-08-16T11:38:41Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md

@@ -2,28 +2,28 @@
 > * 原文作者：[Jon Abrams](https://medium.com/@jonathanabrams?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md](https://github.com/xitu/gold-miner/blob/master/TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md)
-> * 译者：
+> * 译者：[Noah Gao](https://noahgao.net)
 > * 校对者：


Hopsken · 2018-08-16T11:40:05Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md

 > * 校对者：

-# Introducing SpaceAce, a new kind of front-end state library
+# SpaceAce 了解下，一个新的前端状态管理库


Typo: 了解一下，与标题一致

Hopsken · 2018-08-16T11:44:09Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md


-Anyone who’s developed front-end applications knows that managing the state is one of the most important, and challenging, aspects. Popular component-based view libraries, like React, include fully functional, if not rudimentary, state management. They enable each component of your application to manage their own state. They work well enough for small applications, but you’ll quickly encounter frustration. It’s a challenge deciding which components have state and how the data from each state gets shared between components. Then there’s figuring out how or why state was changed.
+开发前端应用的大家都知道，状态管理是开发中最重要，最具挑战性的一部分。目前流行的基于组件的视图库，如 React，包括功能齐全的（最基本的）状态管理能力。它们使应用中的每个组件都能够管理自己的状态。这对于小型应用程序来说足够了，但您很快就会感到挫败。因为决定哪些组件具有状态以及如何在组件之间共享来自每个状态的数据是一个挑战。最后还要弄清楚状态是如何或为何被改变。


个人建议把『是一个挑战』改为『将会成为一个挑战』，感觉更通顺点

无需使用敬语『您』，使用『你』即可，以下也是

Hopsken · 2018-08-16T11:46:07Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md


-To address the above problems of component-oriented state, libraries like Redux were introduced. They centralize that state into a centralized “store” that every component can read and write to. To maintain order they centralize the logic that changes the state into a central part of the application called the [**reducer**](https://redux.js.org/basics/reducers), which is invoked using **actions**,  and causing it to produce a fresh copy of the state. It’s very effective but has a high learning curve, requires a lot of boiler-plate, and forces you to separate code that updates the state from the code that renders the view.
+为了解决面向组件状态的上述问题，Redux 一类的库被引入。它们将该状态集中到一个集中的“store”中，每个组件都可以读写它。为了维护顺序，他们将改变状态的逻辑集中到应用程序的中心部分，称为 [** reducer **](https://redux.js.org/basics/reducers)，使用 **actions**，并使其产生新的状态副本。它非常有效，但学习曲线很高，需要大量的样板代码，并强迫您将更新状态的代码与渲染视图的代码分开。


store 与 reducer 前后空格
中英文之间需要增加空格

store左右是引号，符号与英文间毋需加空格
reducer左侧有空格，右侧是逗号，同上

Hopsken · 2018-08-16T11:47:41Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md


-To address the above problems of component-oriented state, libraries like Redux were introduced. They centralize that state into a centralized “store” that every component can read and write to. To maintain order they centralize the logic that changes the state into a central part of the application called the [**reducer**](https://redux.js.org/basics/reducers), which is invoked using **actions**,  and causing it to produce a fresh copy of the state. It’s very effective but has a high learning curve, requires a lot of boiler-plate, and forces you to separate code that updates the state from the code that renders the view.
+为了解决面向组件状态的上述问题，Redux 一类的库被引入。它们将该状态集中到一个集中的“store”中，每个组件都可以读写它。为了维护顺序，他们将改变状态的逻辑集中到应用程序的中心部分，称为 [** reducer **](https://redux.js.org/basics/reducers)，使用 **actions**，并使其产生新的状态副本。它非常有效，但学习曲线很高，需要大量的样板代码，并强迫您将更新状态的代码与渲染视图的代码分开。


使用 actions => 使用 action s 调用它们

Hopsken · 2018-08-16T11:51:44Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md


-SpaceAce provides a state management _store_ known as a **space**. A space is the read-only (immutable) state and a toolkit for updating it. But this store doesn’t just _have_ state inside it, it _is_ the state. At the same time, it provides multiple methods for generating new version of state. How? It’s a function… with properties! Many JS developers don’t know that JS functions are also objects. In addition to being executable, they can also have properties, just like objects (because they’re objects too!).
+SpaceAce 提供一个状态管理的 **store** 叫做一个 **space**。一个 space 包括只读（不可变）的状态，还有一些用于更新它的工具集。但是这个 store 里面不只是 **有** 状态，而是它本身就 **是** 状态。同时，他还提供了很多方法来生成新版本的状态。怎么做到？是一些带有属性的函数！很多 JS 开发者不知道 JS 函数也是对象。只是它能执行而已，所以他也能有一些属性，就像对象一样（因为它就是个对象！）。


Hopsken · 2018-08-16T11:56:42Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md

     />
  </form>
 );
 ```

-While most apps contain a lot of simple interactions, they also consist of complex actions. SpaceAce allows you to define custom actions, all within the same file as your component. When called, these actions are given an object filled with handy functions for updating the state:
+虽然大多数应用只有许多简单的交互，但它们有时也会包含一些复杂的 action。SpaceAce 允许您自定义 action，所有 action 都与组件再同一文件中。调用时，会为这些 action 提供一个对象，其中包含用于更新状态的便捷函数：


再同一文件中 => 在同一文件中

Hopsken · 2018-08-16T11:57:10Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md

+  handleSubmit 是一个自定义 action。
+  第一个参数由 SpaceAce 提供。
+  其余参数是需要传入的，
+  在这个案例中由React的事件对象组成。


React 前后空格

Hopsken · 2018-08-16T11:58:26Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md

@@ -132,30 +132,30 @@ export const PizzaForm = ({ space }) => (
 );
 ```

-You may notice that all these ways of changing a space’s state assumes that the state is relatively shallow, but how is that possible if there’s only one space per app? It isn’t! Every space can have any number of child sub-spaces, which are also just spaces, but they have parents. Whenever one of those child spaces is updated the changes bubble up, triggering a re-render of the app once the change reaches the root space.
+您可能会注意到，所有这些改变空间状态的方式都会假定状态相对较浅，但如果每个应用程序只有一个 space，那怎么可能呢？不可能的！每个 space 都可以有任意数量的 sub-space，它们也只是 space，但它们有父级。每当更新其中一个 sub-space 时，改动会冒泡，一旦更改到达根 sapce，就会触发应用的重新渲染。


改变空间状态 => 改变 space 状态，这里无需翻译

Hopsken · 2018-08-16T11:59:41Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md


-The best part of child spaces, is you don’t need to explicitly make them. They’re automatically created when you access an object or array on the space:
+有关子 space 最棒的地方在于，你不用特地去制造它，他将在你访问 space 中的对象或是数组时，自动被创建出来：


Hopsken · 2018-08-16T15:56:45Z

@noahziheng @leviding
校对完成

leviding · 2018-08-17T01:20:33Z

@noahziheng 修改一下吧

noahziheng · 2018-08-17T02:30:57Z

@Hopsken @leviding 校对问题已修改，感谢

leviding · 2018-08-17T03:04:40Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md


-Finally, an example:
+最后，放个例子:


全角冒号

leviding · 2018-08-17T03:04:59Z

TODO1/introducing-spaceace-a-new-kind-of-front-end-state-library.md

-  which in this case consists of React's event object
+/*
+  handleSubmit 是一个自定义 action。
+  第一个参数由 SpaceAce 提供。·


leviding · 2018-08-17T03:38:57Z

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

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

noahziheng · 2018-08-17T04:54:52Z

@leviding 你@错人了....
掘金：https://juejin.im/post/5b7653c96fb9a009c72cb7af
专栏已投稿：https://zhuanlan.zhihu.com/p/42276326

leviding · 2018-08-17T04:58:59Z

哈哈哈迷糊了

Hopsken · 2018-08-17T05:31:48Z

😂我就说嘛，吓我一跳

translate Introducing SpaceAce, a new kind of front-end state library

93018ac

fanyijihua added the 校对认领 label Aug 12, 2018

leviding changed the title ~~SpaceAce 了解下，一个新的前端状态管理库~~ SpaceAce 了解一下，一个新的前端状态管理库 Aug 13, 2018

leviding mentioned this pull request Aug 13, 2018

SpaceAce 了解一下，一个新的前端状态管理库 #4274

Closed

leviding added the 前端 label Aug 13, 2018

fanyijihua added the 正在校对 label Aug 16, 2018

Hopsken reviewed Aug 16, 2018

View reviewed changes

leviding added the enhancement 等待译者修改 label Aug 17, 2018

Modify by review

022746e

leviding reviewed Aug 17, 2018

View reviewed changes

Update introducing-spaceace-a-new-kind-of-front-end-state-library.md

47b01ec

leviding approved these changes Aug 17, 2018

View reviewed changes

leviding merged commit 5552338 into xitu:master Aug 17, 2018

leviding added 翻译完成 and removed enhancement 等待译者修改校对认领正在校对 labels Aug 17, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SpaceAce 了解一下，一个新的前端状态管理库 #4296

SpaceAce 了解一下，一个新的前端状态管理库 #4296

noahziheng commented Aug 12, 2018

Hopsken commented Aug 16, 2018

fanyijihua commented Aug 16, 2018

Hopsken left a comment

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

noahziheng Aug 17, 2018

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

Hopsken Aug 16, 2018

Hopsken commented Aug 16, 2018

leviding commented Aug 17, 2018

noahziheng commented Aug 17, 2018

leviding Aug 17, 2018

leviding Aug 17, 2018

leviding commented Aug 17, 2018

noahziheng commented Aug 17, 2018 •

edited

Loading

leviding commented Aug 17, 2018

Hopsken commented Aug 17, 2018


		Anyone who’s developed front-end applications knows that managing the state is one of the most important, and challenging, aspects. Popular component-based view libraries, like React, include fully functional, if not rudimentary, state management. They enable each component of your application to manage their own state. They work well enough for small applications, but you’ll quickly encounter frustration. It’s a challenge deciding which components have state and how the data from each state gets shared between components. Then there’s figuring out how or why state was changed.
		开发前端应用的大家都知道，状态管理是开发中最重要，最具挑战性的一部分。目前流行的基于组件的视图库，如 React，包括功能齐全的（最基本的）状态管理能力。它们使应用中的每个组件都能够管理自己的状态。这对于小型应用程序来说足够了，但您很快就会感到挫败。因为决定哪些组件具有状态以及如何在组件之间共享来自每个状态的数据是一个挑战。最后还要弄清楚状态是如何或为何被改变。


		To address the above problems of component-oriented state, libraries like Redux were introduced. They centralize that state into a centralized “store” that every component can read and write to. To maintain order they centralize the logic that changes the state into a central part of the application called the [reducer](https://redux.js.org/basics/reducers), which is invoked using actions, and causing it to produce a fresh copy of the state. It’s very effective but has a high learning curve, requires a lot of boiler-plate, and forces you to separate code that updates the state from the code that renders the view.
		为了解决面向组件状态的上述问题，Redux 一类的库被引入。它们将该状态集中到一个集中的“store”中，每个组件都可以读写它。为了维护顺序，他们将改变状态的逻辑集中到应用程序的中心部分，称为 [ reducer ](https://redux.js.org/basics/reducers)，使用 actions，并使其产生新的状态副本。它非常有效，但学习曲线很高，需要大量的样板代码，并强迫您将更新状态的代码与渲染视图的代码分开。


		SpaceAce provides a state management _store_ known as a space. A space is the read-only (immutable) state and a toolkit for updating it. But this store doesn’t just _have_ state inside it, it _is_ the state. At the same time, it provides multiple methods for generating new version of state. How? It’s a function… with properties! Many JS developers don’t know that JS functions are also objects. In addition to being executable, they can also have properties, just like objects (because they’re objects too!).
		SpaceAce 提供一个状态管理的 store 叫做一个 space。一个 space 包括只读（不可变）的状态，还有一些用于更新它的工具集。但是这个 store 里面不只是有状态，而是它本身就是状态。同时，他还提供了很多方法来生成新版本的状态。怎么做到？是一些带有属性的函数！很多 JS 开发者不知道 JS 函数也是对象。只是它能执行而已，所以他也能有一些属性，就像对象一样（因为它就是个对象！）。


		The best part of child spaces, is you don’t need to explicitly make them. They’re automatically created when you access an object or array on the space:
		有关子 space 最棒的地方在于，你不用特地去制造它，他将在你访问 space 中的对象或是数组时，自动被创建出来：


		Finally, an example:
		最后，放个例子:

SpaceAce 了解一下，一个新的前端状态管理库 #4296

SpaceAce 了解一下，一个新的前端状态管理库 #4296

Conversation

noahziheng commented Aug 12, 2018

Hopsken commented Aug 16, 2018

fanyijihua commented Aug 16, 2018

Hopsken 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

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

Hopsken commented Aug 16, 2018

leviding commented Aug 17, 2018

noahziheng commented Aug 17, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leviding commented Aug 17, 2018

noahziheng commented Aug 17, 2018 • edited Loading

leviding commented Aug 17, 2018

Hopsken commented Aug 17, 2018

noahziheng commented Aug 17, 2018 •

edited

Loading