|
2981 | 2981 |
|
2982 | 2982 | ## React Redux
|
2983 | 2983 |
|
2984 |
| -152. ### What is flux? |
| 2984 | +152. ### 什么是 flux? |
2985 | 2985 |
|
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 会在内部使用此模式。 |
2987 | 2987 |
|
2988 |
| - The workflow between dispatcher, stores and views components with distinct inputs and outputs as follows: |
| 2988 | + 在 dispatcher,stores 和视图组件具有如下不同的输入和输出: |
2989 | 2989 |
|
2990 | 2990 | 
|
2991 | 2991 |
|
2992 |
| -153. ### What is Redux? |
| 2992 | +153. ### 什么是 Redux? |
2993 | 2993 |
|
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)并且没有依赖性。 |
2995 | 2995 |
|
2996 |
| -154. ### What are the core principles of Redux? |
| 2996 | +154. ### Redux 的核心原则是什么?? |
2997 | 2997 |
|
2998 |
| - Redux follows three fundamental principles: |
| 2998 | + Redux 遵循三个基本原则: |
2999 | 2999 |
|
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 只是纯函数,它将先前的状态和操作作为参数,并返回下一个状态。 |
3003 | 3003 |
|
3004 |
| -155. ### What are the downsides of Redux compared to Flux? |
| 3004 | +155. ### 与 Flux 相比,Redux 的缺点是什么? |
3005 | 3005 |
|
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 几乎没有任何缺点。这些如下: |
3007 | 3007 |
|
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 还不支持。 |
3011 | 3011 |
|
3012 |
| -156. ### What is the difference between `mapStateToProps()` and `mapDispatchToProps()`? |
| 3012 | +156. ### `mapStateToProps()`和`mapDispatchToProps()`之间有什么区别? |
3013 | 3013 |
|
3014 |
| - `mapStateToProps()` is a utility which helps your component get updated state (which is updated by some other components): |
| 3014 | + `mapStateToProps()`是一个实用方法,它可以帮助您的组件获得最新的状态(由其他一些组件更新): |
3015 | 3015 |
|
3016 | 3016 | ```javascript
|
3017 | 3017 | const mapStateToProps = (state) => {
|
|
3021 | 3021 | }
|
3022 | 3022 | ```
|
3023 | 3023 |
|
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()`是一个实用方法,它可以帮助你的组件触发一个动作事件(可能导致应用程序状态改变的调度动作): |
3025 | 3025 |
|
3026 | 3026 | ```javascript
|
3027 | 3027 | const mapDispatchToProps = (dispatch) => {
|
|
3033 | 3033 | }
|
3034 | 3034 | ```
|
3035 | 3035 |
|
3036 |
| -157. ### Can I dispatch an action in reducer? |
| 3036 | +157. ### 我可以在 reducer 中触发一个 Action 吗? |
3037 | 3037 |
|
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 和其他副作用。 |
3039 | 3039 |
|
3040 |
| -158. ### How to access Redux store outside a component? |
| 3040 | +158. ### 如何在组件外部访问 Redux 存储的对象? |
3041 | 3041 |
|
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()`从它创建的模块中导出存储。此外,它不应污染全局窗口对象。 |
3043 | 3043 |
|
3044 | 3044 | ```javascript
|
3045 | 3045 | store = createStore(myReducer)
|
3046 | 3046 |
|
3047 | 3047 | export default store
|
3048 | 3048 | ```
|
3049 | 3049 |
|
3050 |
| -159. ### What are the drawbacks of MVW pattern? |
| 3050 | +159. ### MVW 模式的缺点是什么? |
3051 | 3051 |
|
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. 无需添加太多额外代码就无法轻松撤消(及时回退)。 |
3056 | 3056 |
|
3057 |
| -160. ### Are there any similarities between Redux and RxJS? |
| 3057 | +160. ### Redux 和 RxJS 之间是否有任何相似之处? |
3058 | 3058 |
|
3059 |
| - These libraries are very different for very different purposes, but there are some vague similarities. |
| 3059 | + 这些库的目的是不同的,但是存在一些模糊的相似之处。 |
3060 | 3060 |
|
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 来完成这种模式。 |
3062 | 3062 |
|
3063 |
| -161. ### How to dispatch an action on load? |
| 3063 | +161. ### 如何在加载时触发 Action? |
3064 | 3064 |
|
3065 |
| - You can dispatch an action in `componentDidMount()` method and in `render()` method you can verify the data. |
| 3065 | + 您可以在`componentDidMount()`方法中触发 Action,然后在`render()`方法中可以验证数据。 |
3066 | 3066 |
|
3067 | 3067 | ```javascript
|
3068 | 3068 | class App extends Component {
|
|
3086 | 3086 | export default connect(mapStateToProps, mapDispatchToProps)(App)
|
3087 | 3087 | ```
|
3088 | 3088 |
|
3089 |
| -162. ### How to use `connect()` from React Redux? |
| 3089 | +162. ### 在 React 中如何使用 Redux 的`connect()`? |
3090 | 3090 |
|
3091 |
| - You need to follow two steps to use your store in your container: |
| 3091 | + 您需要按照两个步骤在容器中使用您的 Store: |
3092 | 3092 |
|
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()`。 |
3095 | 3095 |
|
3096 | 3096 | ```jsx
|
3097 | 3097 | import React from 'react'
|
|
3110 | 3110 | export default connect(mapStateToProps)(App)
|
3111 | 3111 | ```
|
3112 | 3112 |
|
3113 |
| -163. ### How to reset state in Redux? |
| 3113 | +163. ### 如何在 Redux 中重置状态? |
3114 | 3114 |
|
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。 |
3116 | 3116 |
|
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 应该返回初始状态。 |
3118 | 3118 |
|
3119 | 3119 | ```javascript
|
3120 | 3120 | const appReducer = combineReducers({
|
|
3130 | 3130 | }
|
3131 | 3131 | ```
|
3132 | 3132 |
|
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`之前解析状态并清理每个存储状态键。 |
3134 | 3134 |
|
3135 | 3135 | ```javascript
|
3136 | 3136 | const appReducer = combineReducers({
|
|
3150 | 3150 | }
|
3151 | 3151 | ```
|
3152 | 3152 |
|
3153 |
| -164. ### Whats the purpose of `at` symbol in the Redux connect decorator? |
| 3153 | +164. ### Redux 中连接装饰器的`at`符号的目的是什么? |
3154 | 3154 |
|
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 表达式。*装饰器*可以在设计时注释和修改类和属性。 |
3156 | 3156 |
|
3157 |
| - Let's take an example setting up Redux without and with a decorator. |
| 3157 | + 让我们举个例子,在没有装饰器的情况下设置 Redux 。 |
3158 | 3158 |
|
3159 |
| - * **Without decorator:** |
| 3159 | + * **未使用装饰器:** |
3160 | 3160 |
|
3161 | 3161 | ```javascript
|
3162 | 3162 | import React from 'react'
|
|
3179 | 3179 | export default connect(mapStateToProps, mapDispatchToProps)(MyApp)
|
3180 | 3180 | ```
|
3181 | 3181 |
|
3182 |
| - * **With decorator:** |
| 3182 | + * **使用装饰器:** |
3183 | 3183 |
|
3184 | 3184 | ```javascript
|
3185 | 3185 | import React from 'react'
|
|
3201 | 3201 | }
|
3202 | 3202 | ```
|
3203 | 3203 |
|
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`来获得装饰器支持。 |
3205 | 3205 |
|
3206 |
| -165. ### What is the difference between React context and React Redux? |
| 3206 | +165. ### React 上下文和 React Redux 之间有什么区别? |
3207 | 3207 |
|
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 中有所体现。 |
3209 | 3209 |
|
3210 |
| -166. ### Why are Redux state functions called reducers? |
| 3210 | +166. ### 为什么 Redux 状态函数称为 reducers ? |
3211 | 3211 |
|
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),在该状态下执行这些操作以获得最终的最终状态。 |
3213 | 3213 |
|
3214 |
| -167. ### How to make AJAX request in Redux? |
| 3214 | +167. ### 如何在 Redux 中发起 AJAX 请求? |
3215 | 3215 |
|
3216 |
| - You can use `redux-thunk` middleware which allows you to define async actions. |
| 3216 | + 您可以使用`redux-thunk`中间件,它允许您定义异步操作。 |
3217 | 3217 |
|
3218 |
| - Let's take an example of fetching specific account as an AJAX call using *fetch API*: |
| 3218 | + 让我们举个例子,使用*fetch API*将特定帐户作为 AJAX 调用获取: |
3219 | 3219 |
|
3220 | 3220 | ```javascript
|
3221 | 3221 | export function fetchAccount(id) {
|
|
3237 | 3237 | }
|
3238 | 3238 | ```
|
3239 | 3239 |
|
3240 |
| -168. ### Should I keep all component's state in Redux store? |
| 3240 | +168. ### 我应该在Redux Store 中保留所有组件的状态吗? |
3241 | 3241 |
|
3242 |
| - Keep your data in the Redux store, and the UI related state internally in the component. |
| 3242 | + 将数据保存在 Redux 存储中,并在组件内部保持 UI 相关状态。 |
3243 | 3243 |
|
3244 |
| -169. ### What is the proper way to access Redux store? |
| 3244 | +169. ### 访问 Redux Store 的正确方法是什么? |
3245 | 3245 |
|
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 更新时自动传递它们。 |
3247 | 3247 |
|
3248 |
| - Let's take an example of `<FilterLink>` component using connect: |
| 3248 | + 我们来看一个使用 connect 的`<FilterLink>`组件的例子: |
3249 | 3249 |
|
3250 | 3250 | ```javascript
|
3251 | 3251 | import { connect } from 'react-redux'
|
|
3268 | 3268 | export default FilterLink
|
3269 | 3269 | ```
|
3270 | 3270 |
|
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)。 |
3272 | 3272 |
|
3273 | 3273 | ```javascript
|
3274 | 3274 | class MyComponent {
|
|
3278 | 3278 | }
|
3279 | 3279 | ```
|
3280 | 3280 |
|
3281 |
| -170. ### What is the difference between component and container in React Redux? |
| 3281 | +170. ### React Redux 中展示组件和容器组件之间的区别是什么? |
3282 | 3282 |
|
3283 |
| - **Component** is a class or function component that describes the presentational part of your application. |
| 3283 | + **展示组件**是一个类或功能组件,用于描述应用程序的展示部分。 |
3284 | 3284 |
|
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 元素; 他们将渲染委托给展示性的子组件。 |
3286 | 3286 |
|
3287 | 3287 | 171. ### What is the purpose of the constants in Redux?
|
3288 | 3288 |
|
|
0 commit comments