Skip to content

Commit 2d8d769

Browse files
committed
doc: 翻译152到170
1 parent 1f38d4f commit 2d8d769

File tree

1 file changed

+62
-62
lines changed

1 file changed

+62
-62
lines changed

README.md

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -2981,37 +2981,37 @@
29812981
29822982
## React Redux
29832983
2984-
152. ### What is flux?
2984+
152. ### 什么是 flux?
29852985
2986-
*Flux* is an *application design paradigm* used as a replacement for the more traditional MVC pattern. It is not a framework or a library but a new kind of architecture that complements React and the concept of Unidirectional Data Flow. Facebook uses this pattern internally when working with React.
2986+
*Flux*是*应用程序设计范例*,用于替代更传统的 MVC 模式。它不是一个框架或库,而是一种新的体系结构,它补充了 React 和单向数据流的概念。在使用 React 时,Facebook 会在内部使用此模式。
29872987
2988-
The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows:
2988+
dispatcherstores 和视图组件具有如下不同的输入和输出:
29892989
29902990
![flux](images/flux.png)
29912991
2992-
153. ### What is Redux?
2992+
153. ### 什么是 Redux?
29932993
2994-
*Redux* is a predictable state container for JavaScript apps based on the *Flux design pattern*. Redux can be used together with React, or with any other view library. It is tiny (about 2kB) and has no dependencies.
2994+
*Redux*是基于*Flux设计模式*的 JavaScript 应用程序的可预测状态容器。Redux 可以与 React 一起使用,也可以与任何其他视图库一起使用。它很小(约2kB)并且没有依赖性。
29952995
2996-
154. ### What are the core principles of Redux?
2996+
154. ### Redux 的核心原则是什么??
29972997
2998-
Redux follows three fundamental principles:
2998+
Redux 遵循三个基本原则:
29992999
3000-
1. **Single source of truth:** The state of your whole application is stored in an object tree within a single store. The single state tree makes it easier to keep track of changes over time and debug or inspect the application.
3001-
2. **State is read-only:** The only way to change the state is to emit an action, an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state.
3002-
3. **Changes are made with pure functions:** To specify how the state tree is transformed by actions, you write reducers. Reducers are just pure functions that take the previous state and an action as parameters, and return the next state.
3000+
1. **单一数据来源:** 整个应用程序的状态存储在单个对象树中。单状态树可以更容易地跟踪随时间的变化并调试或检查应用程序。
3001+
2. **状态是只读的:** 改变状态的唯一方法是发出一个动作,一个描述发生的事情的对象。这可以确保视图和网络请求都不会直接写入状态。
3002+
3. **使用纯函数进行更改:** 要指定状态树如何通过操作进行转换,您可以编写reducers。Reducers 只是纯函数,它将先前的状态和操作作为参数,并返回下一个状态。
30033003
3004-
155. ### What are the downsides of Redux compared to Flux?
3004+
155. ### 与 Flux 相比,Redux 的缺点是什么?
30053005
3006-
Instead of saying downsides we can say that there are few compromises of using Redux over Flux. Those are as follows:
3006+
我们应该说使用 Redux 而不是 Flux 几乎没有任何缺点。这些如下:
30073007
3008-
1. **You will need to learn to avoid mutations:** Flux is un-opinionated about mutating data, but Redux doesn't like mutations and many packages complementary to Redux assume you never mutate the state. You can enforce this with dev-only packages like `redux-immutable-state-invariant`, Immutable.js, or instructing your team to write non-mutating code.
3009-
2. **You're going to have to carefully pick your packages:** While Flux explicitly doesn't try to solve problems such as undo/redo, persistence, or forms, Redux has extension points such as middleware and store enhancers, and it has spawned a rich ecosystem.
3010-
3. **There is no nice Flow integration yet:** Flux currently lets you do very impressive static type checks which Redux doesn't support yet.
3008+
1. **您将需要学会避免突变:** Flux 对变异数据毫不吝啬,但 Redux 不喜欢突变,许多与 Redux 互补的包假设您从不改变状态。您可以使用 dev-only 软件包强制执行此操作,例如`redux-immutable-state-invariant`Immutable.js,或指示您的团队编写非变异代码。
3009+
2. **您将不得不仔细选择您的软件包:** 虽然 Flux 明确没有尝试解决诸如撤消/重做,持久性或表单之类的问题,但 Redux 有扩展点,例如中间件和存储增强器,以及它催生了丰富的生态系统。
3010+
3. **还没有很好的 Flow 集成:** Flux 目前可以让你做一些非常令人印象深刻的静态类型检查,Redux 还不支持。
30113011
3012-
156. ### What is the difference between `mapStateToProps()` and `mapDispatchToProps()`?
3012+
156. ### `mapStateToProps()``mapDispatchToProps()`之间有什么区别?
30133013
3014-
`mapStateToProps()` is a utility which helps your component get updated state (which is updated by some other components):
3014+
`mapStateToProps()`是一个实用方法,它可以帮助您的组件获得最新的状态(由其他一些组件更新):
30153015
30163016
```javascript
30173017
const mapStateToProps = (state) => {
@@ -3021,7 +3021,7 @@
30213021
}
30223022
```
30233023
3024-
`mapDispatchToProps()` is a utility which will help your component to fire an action event (dispatching action which may cause change of application state):
3024+
`mapDispatchToProps()`是一个实用方法,它可以帮助你的组件触发一个动作事件(可能导致应用程序状态改变的调度动作):
30253025
30263026
```javascript
30273027
const mapDispatchToProps = (dispatch) => {
@@ -3033,36 +3033,36 @@
30333033
}
30343034
```
30353035
3036-
157. ### Can I dispatch an action in reducer?
3036+
157. ### 我可以在 reducer 中触发一个 Action 吗?
30373037
3038-
Dispatching an action within a reducer is an **anti-pattern**. Your reducer should be *without side effects*, simply digesting the action payload and returning a new state object. Adding listeners and dispatching actions within the reducer can lead to chained actions and other side effects.
3038+
reducer 中触发 Action 是**反模式**。您的 reducer 应该*没有副作用*,只是接收 Action 并返回一个新的状态对象。在 reducer 中添加侦听器和调度操作可能会导致链接的 Action 和其他副作用。
30393039
3040-
158. ### How to access Redux store outside a component?
3040+
158. ### 如何在组件外部访问 Redux 存储的对象?
30413041
3042-
Yes. You just need to export the store from the module where it created with `createStore()`. Also, it shouldn't pollute the global window object.
3042+
是的,您只需要使用`createStore()`从它创建的模块中导出存储。此外,它不应污染全局窗口对象。
30433043
30443044
```javascript
30453045
store = createStore(myReducer)
30463046

30473047
export default store
30483048
```
30493049
3050-
159. ### What are the drawbacks of MVW pattern?
3050+
159. ### MVW 模式的缺点是什么?
30513051
3052-
1. The DOM manipulation is very expensive which causes applications behaves slowly and inefficient.
3053-
3. Due to circular dependencies, a complicated model was created around models and views.
3054-
3. Lot of data changes happens for collaborative applications(like Google Docs).
3055-
4. No way to do undo (travel back in time) easily without adding so much extra code.
3052+
1. DOM 操作非常昂贵,导致应用程序行为缓慢且效率低下。
3053+
3. 由于循环依赖性,围绕模型和视图创建了复杂的模型。
3054+
3. 协作型应用程序(如Google Docs)会发生大量数据更改。
3055+
4. 无需添加太多额外代码就无法轻松撤消(及时回退)。
30563056
3057-
160. ### Are there any similarities between Redux and RxJS?
3057+
160. ### Redux RxJS 之间是否有任何相似之处?
30583058
3059-
These libraries are very different for very different purposes, but there are some vague similarities.
3059+
这些库的目的是不同的,但是存在一些模糊的相似之处。
30603060
3061-
Redux is a tool for managing state throughout the application. It is usually used as an architecture for UIs. Think of it as an alternative to (half of) Angular. RxJS is a reactive programming library. It is usually used as a tool to accomplish asynchronous tasks in JavaScript. Think of it as an alternative to Promises. Redux uses the Reactive paradigm because the Store is reactive. The Store observes actions from a distance, and changes itself. RxJS also uses the Reactive paradigm, but instead of being an architecture, it gives you basic building blocks, Observables, to accomplish this pattern.
3061+
Redux 是一个在整个应用程序中管理状态的工具。它通常用作 UI 的体系结构。可以将其视为(一半)Angular 的替代品。 RxJS 是一个反应式编程库。它通常用作在 JavaScript 中完成异步任务的工具。把它想象成 Promise 的替代品。 Redux 使用 Reactive 范例,因为Store是被动的。Store 检测到 Action,并自行改变。RxJS也使用 Reactive 范例,但它不是一个体系结构,它为您提供了基本构建块 Observables 来完成这种模式。
30623062
3063-
161. ### How to dispatch an action on load?
3063+
161. ### 如何在加载时触发 Action?
30643064
3065-
You can dispatch an action in `componentDidMount()` method and in `render()` method you can verify the data.
3065+
您可以在`componentDidMount()`方法中触发 Action,然后在`render()`方法中可以验证数据。
30663066
30673067
```javascript
30683068
class App extends Component {
@@ -3086,12 +3086,12 @@
30863086
export default connect(mapStateToProps, mapDispatchToProps)(App)
30873087
```
30883088
3089-
162. ### How to use `connect()` from React Redux?
3089+
162. ### 在 React 中如何使用 Redux 的`connect()`?
30903090
3091-
You need to follow two steps to use your store in your container:
3091+
您需要按照两个步骤在容器中使用您的 Store:
30923092
3093-
1. **Use `mapStateToProps()`:** It maps the state variables from your store to the props that you specify.
3094-
2. **Connect the above props to your container:** The object returned by the `mapStateToProps` function is connected to the container. You can import `connect()` from `react-redux`.
3093+
1. **使用`mapStateToProps()`** 它将 Store 中的状态变量映射到您指定的属性。
3094+
2. **将上述属性连接到容器:** `mapStateToProps`函数返回的对象连接到容器。你可以从`react-redux`导入`connect()`
30953095
30963096
```jsx
30973097
import React from 'react'
@@ -3110,11 +3110,11 @@
31103110
export default connect(mapStateToProps)(App)
31113111
```
31123112
3113-
163. ### How to reset state in Redux?
3113+
163. ### 如何在 Redux 中重置状态?
31143114
3115-
You need to write a *root reducer* in your application which delegate handling the action to the reducer generated by `combineReducers()`.
3115+
你需要在你的应用程序中编写一个*root reducer*,它将处理动作委托给`combineReducers()`生成的 reducer。
31163116
3117-
For example, let us take `rootReducer()` to return the initial state after `USER_LOGOUT` action. As we know, reducers are supposed to return the initial state when they are called with `undefined` as the first argument, no matter the action.
3117+
例如,让我们在`USER_LOGOUT`动作之后让`rootReducer()`返回初始状态。我们知道,无论 Action 怎么样,当使用`undefined`作为第一个参数调用它们时,reducers 应该返回初始状态。
31183118
31193119
```javascript
31203120
const appReducer = combineReducers({
@@ -3130,7 +3130,7 @@
31303130
}
31313131
```
31323132
3133-
In case of using `redux-persist`, you may also need to clean your storage. `redux-persist` keeps a copy of your state in a storage engine. First, you need to import the appropriate storage engine and then, to parse the state before setting it to undefined and clean each storage state key.
3133+
如果使用`redux-persist`,您可能还需要清理存储空间。`redux-persist`storage 引擎中保存您的状态副本。首先,您需要导入适当的 storage 引擎,然后在将其设置为`undefined`之前解析状态并清理每个存储状态键。
31343134
31353135
```javascript
31363136
const appReducer = combineReducers({
@@ -3150,13 +3150,13 @@
31503150
}
31513151
```
31523152
3153-
164. ### Whats the purpose of `at` symbol in the Redux connect decorator?
3153+
164. ### Redux 中连接装饰器的`at`符号的目的是什么?
31543154
3155-
The **@** symbol is in fact a JavaScript expression used to signify decorators. *Decorators* make it possible to annotate and modify classes and properties at design time.
3155+
**@**符号实际上是用于表示装饰器的 JavaScript 表达式。*装饰器*可以在设计时注释和修改类和属性。
31563156
3157-
Let's take an example setting up Redux without and with a decorator.
3157+
让我们举个例子,在没有装饰器的情况下设置 Redux
31583158
3159-
* **Without decorator:**
3159+
* **未使用装饰器:**
31603160
31613161
```javascript
31623162
import React from 'react'
@@ -3179,7 +3179,7 @@
31793179
export default connect(mapStateToProps, mapDispatchToProps)(MyApp)
31803180
```
31813181
3182-
* **With decorator:**
3182+
* **使用装饰器:**
31833183
31843184
```javascript
31853185
import React from 'react'
@@ -3201,21 +3201,21 @@
32013201
}
32023202
```
32033203
3204-
The above examples are almost similar except the usage of decorator. The decorator syntax isn't built into any JavaScript runtimes yet, and is still experimental and subject to change. You can use babel for the decorators support.
3204+
除了装饰器的使用外,上面的例子几乎相似。装饰器语法尚未构建到任何 JavaScript 运行时中,并且仍然是实验性的并且可能会发生变化。您可以使用`babel`来获得装饰器支持。
32053205
3206-
165. ### What is the difference between React context and React Redux?
3206+
165. ### React 上下文和 React Redux 之间有什么区别?
32073207
3208-
You can use **Context** in your application directly and is going to be great for passing down data to deeply nested components which what it was designed for. Whereas **Redux** is much more powerful and provides a large number of features that the Context API doesn't provide. Also, React Redux uses context internally but it doesn't expose this fact in the public API.
3208+
您可以直接在应用程序中使用**Context**,这对于将数据传递给深度嵌套的组件非常有用。而**Redux**功能更强大,它还提供了 Context API 无法提供的大量功能。此外,React Redux 在内部使用上下文,但它不会在公共 API 中有所体现。
32093209
3210-
166. ### Why are Redux state functions called reducers?
3210+
166. ### 为什么 Redux 状态函数称为 reducers ?
32113211
3212-
Reducers always return the accumulation of the state (based on all previous and current actions). Therefore, they act as a reducer of state. Each time a Redux reducer is called, the state and action are passed as parameters. This state is then reduced (or accumulated) based on the action, and then the next state is returned. You could *reduce* a collection of actions and an initial state (of the store) on which to perform these actions to get the resulting final state.
3212+
Reducers 总是返回状态的累积(基于所有先前状态和当前 Action)。因此,它们充当了状态的 Reducer。每次调用 Redux reducer 时,状态和 Action 都将作为参数传递。然后基于该 Action 减少(或累积)该状态,然后返回下一状态。您可以*reduce*一组操作和一个初始状态(Store),在该状态下执行这些操作以获得最终的最终状态。
32133213
3214-
167. ### How to make AJAX request in Redux?
3214+
167. ### 如何在 Redux 中发起 AJAX 请求?
32153215
3216-
You can use `redux-thunk` middleware which allows you to define async actions.
3216+
您可以使用`redux-thunk`中间件,它允许您定义异步操作。
32173217
3218-
Let's take an example of fetching specific account as an AJAX call using *fetch API*:
3218+
让我们举个例子,使用*fetch API*将特定帐户作为 AJAX 调用获取:
32193219
32203220
```javascript
32213221
export function fetchAccount(id) {
@@ -3237,15 +3237,15 @@
32373237
}
32383238
```
32393239
3240-
168. ### Should I keep all component's state in Redux store?
3240+
168. ### 我应该在Redux Store 中保留所有组件的状态吗?
32413241
3242-
Keep your data in the Redux store, and the UI related state internally in the component.
3242+
将数据保存在 Redux 存储中,并在组件内部保持 UI 相关状态。
32433243
3244-
169. ### What is the proper way to access Redux store?
3244+
169. ### 访问 Redux Store 的正确方法是什么?
32453245
3246-
The best way to access your store in a component is to use the `connect()` function, that creates a new component that wraps around your existing one. This pattern is called *Higher-Order Components*, and is generally the preferred way of extending a component's functionality in React. This allows you to map state and action creators to your component, and have them passed in automatically as your store updates.
3246+
在组件中访问 Store 的最佳方法是使用`connect()`函数,该函数创建一个包裹现有组件的新组件。此模式称为*高阶组件*,通常是在 React 中扩展组件功能的首选方式。这允许您将状态和 Action 创建者映射到组件,并在 Store 更新时自动传递它们。
32473247
3248-
Let's take an example of `<FilterLink>` component using connect:
3248+
我们来看一个使用 connect 的`<FilterLink>`组件的例子:
32493249
32503250
```javascript
32513251
import { connect } from 'react-redux'
@@ -3268,7 +3268,7 @@
32683268
export default FilterLink
32693269
```
32703270
3271-
Due to it having quite a few performance optimizations and generally being less likely to cause bugs, the Redux developers almost always recommend using `connect()` over accessing the store directly (using context API).
3271+
由于它具有相当多的性能优化并且通常不太可能导致错误,因此 Redux 开发人员几乎总是建议使用`connect()`直接访问 Store(使用上下文API)。
32723272
32733273
```javascript
32743274
class MyComponent {
@@ -3278,11 +3278,11 @@
32783278
}
32793279
```
32803280
3281-
170. ### What is the difference between component and container in React Redux?
3281+
170. ### React Redux 中展示组件和容器组件之间的区别是什么?
32823282
3283-
**Component** is a class or function component that describes the presentational part of your application.
3283+
**展示组件**是一个类或功能组件,用于描述应用程序的展示部分。
32843284
3285-
**Container** is an informal term for a component that is connected to a Redux store. Containers *subscribe* to Redux state updates and *dispatch* actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.
3285+
**容器组件**是连接到 Redux Store的组件的非正式术语。容器组件*订阅* Redux 状态更新和*dispatch*操作,它们通常不呈现 DOM 元素; 他们将渲染委托给展示性的子组件。
32863286
32873287
171. ### What is the purpose of the constants in Redux?
32883288

0 commit comments

Comments
 (0)