Skip to main content

词汇表

¥Glossary

这是 Redux 中核心术语及其类型签名的词汇表。这些类型使用 流量符号 进行记录。

¥This is a glossary of the core terms in Redux, along with their type signatures. The types are documented using Flow notation.

状态

¥State

type State = any

状态(也称为状态树)是一个广义的术语,但在 Redux API 中它通常指的是由 store 管理并由 getState() 返回的单个状态值。它代表 Redux 应用的整个状态,通常是深度嵌套的对象。

¥State (also called the state tree) is a broad term, but in the Redux API it usually refers to the single state value that is managed by the store and returned by getState(). It represents the entire state of a Redux application, which is often a deeply nested object.

按照惯例,顶层状态是一个对象或其他一些键值集合(例如 Map),但从技术上讲它可以是任何类型。尽管如此,你还是应该尽力保持状态可序列化。不要在其中放入任何无法轻松转换为 JSON 的内容。

¥By convention, the top-level state is an object or some other key-value collection like a Map, but technically it can be any type. Still, you should do your best to keep the state serializable. Don't put anything inside it that you can't easily turn into JSON.

行动

¥Action

type Action = Object

动作是一个简单的对象,表示改变状态的意图。操作是将数据输入存储的唯一方法。任何数据,无论是来自 UI 事件、网络回调还是其他来源(例如 WebSocket),最终都需要作为操作进行分派。

¥An action is a plain object that represents an intention to change the state. Actions are the only way to get data into the store. Any data, whether from UI events, network callbacks, or other sources such as WebSockets needs to eventually be dispatched as actions.

操作必须有一个 type 字段来指示正在执行的操作类型。类型可以定义为常量并从另一个模块导入。对 type 使用字符串比对 符号 使用字符串更好,因为字符串是可序列化的。

¥Actions must have a type field that indicates the type of action being performed. Types can be defined as constants and imported from another module. It's better to use strings for type than Symbols because strings are serializable.

除了 type 之外,动作对象的结构实际上取决于你。如果你有兴趣,请查看 通量标准作用 以获取有关如何构建操作的建议。

¥Other than type, the structure of an action object is really up to you. If you're interested, check out Flux Standard Action for recommendations on how actions should be constructed.

另请参阅下面的 异步动作

¥See also async action below.

reducer

type Reducer<S, A> = (state: S, action: A) => S

reducer 是一个接受累加和值并返回新累加的函数。它们用于将值的集合减少为单个值。

¥A reducer is a function that accepts an accumulation and a value and returns a new accumulation. They are used to reduce a collection of values down to a single value.

reducer 并不是 Redux 所独有的 - 它们是函数式编程中的一个基本概念。即使大多数非函数式语言(例如 JavaScript)也具有用于减少的内置 API。在 JavaScript 中,它是 Array.prototype.reduce()

¥Reducers are not unique to Redux—they are a fundamental concept in functional programming. Even most non-functional languages, like JavaScript, have a built-in API for reducing. In JavaScript, it's Array.prototype.reduce().

在 Redux 中,累积的值是状态对象,累积的值是操作。reducer 在给定先前状态和操作的情况下计算新状态。它们必须是纯函数 - 对于给定的输入返回完全相同的输出的函数。它们还应该没有副作用。这就是热重载和时间旅行等令人兴奋的功能的实现。

¥In Redux, the accumulated value is the state object, and the values being accumulated are actions. Reducers calculate a new state given the previous state and an action. They must be pure functions—functions that return the exact same output for given inputs. They should also be free of side-effects. This is what enables exciting features like hot reloading and time travel.

reducer 是 Redux 中最重要的概念。

¥Reducers are the most important concept in Redux.

不要将 API 调用放入 reducer 中。

¥Do not put API calls into reducers.

调度功能

¥Dispatching Function

type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any

调度函数(或简称调度函数)是一个接受动作或 异步动作 的函数;然后,它可能会也可能不会向存储发送一项或多项操作。

¥A dispatching function (or simply dispatch function) is a function that accepts an action or an async action; it then may or may not dispatch one or more actions to the store.

我们必须区分一般的调度函数和存储实例提供的基本 dispatch 函数,无需任何中间件。

¥We must distinguish between dispatching functions in general and the base dispatch function provided by the store instance without any middleware.

基本调度函数始终将操作与存储返回的先前状态同步发送到存储的 reducer,以计算新状态。它期望操作是准备被 reducer 使用的普通对象。

¥The base dispatch function always synchronously sends an action to the store's reducer, along with the previous state returned by the store, to calculate a new state. It expects actions to be plain objects ready to be consumed by the reducer.

中间件 封装了基本调度函数。除了操作之外,它还允许调度函数处理 异步操作。中间件可以在将操作或异步操作传递给下一个中间件之前对其进行转换、延迟、忽略或以其他方式解释。请参阅下面的详细信息。

¥Middleware wraps the base dispatch function. It allows the dispatch function to handle async actions in addition to actions. Middleware may transform, delay, ignore, or otherwise interpret actions or async actions before passing them to the next middleware. See below for more information.

动作创造者

¥Action Creator

type ActionCreator<A, P extends any[] = any[]> = (...args: P) => Action | AsyncAction

简单来说,动作创建器就是一个创建动作的函数。不要混淆这两个术语 - 再次强调,动作是信息的有效负载,而动作创建者是创建动作的工厂。

¥An action creator is, quite simply, a function that creates an action. Do not confuse the two terms—again, an action is a payload of information, and an action creator is a factory that creates an action.

调用动作创建者只会产生一个动作,但不会调度它。你需要调用存储的 dispatch 函数才能真正引起突变。有时我们说绑定动作创建者是指调用动作创建者并立即将其结果分派到特定存储实例的函数。

¥Calling an action creator only produces an action, but does not dispatch it. You need to call the store's dispatch function to actually cause the mutation. Sometimes we say bound action creators to mean functions that call an action creator and immediately dispatch its result to a specific store instance.

如果操作创建者需要读取当前状态、执行 API 调用或引起副作用(例如路由转换),则它应该返回 异步动作 而不是操作。

¥If an action creator needs to read the current state, perform an API call, or cause a side effect, like a routing transition, it should return an async action instead of an action.

异步操作

¥Async Action

type AsyncAction = any

异步操作是发送到调度函数的值,但尚未准备好供 reducer 使用。在发送到基础 dispatch() 函数之前,它将被 中间件 转换为一个动作(或一系列动作)。异步操作可能有不同的类型,具体取决于你使用的中间件。它们通常是异步原语,例如 Promise 或 thunk,它们不会立即传递给 reducer,而是在操作完成后触发操作分派。

¥An async action is a value that is sent to a dispatching function, but is not yet ready for consumption by the reducer. It will be transformed by middleware into an action (or a series of actions) before being sent to the base dispatch() function. Async actions may have different types, depending on the middleware you use. They are often asynchronous primitives, like a Promise or a thunk, which are not passed to the reducer immediately, but trigger action dispatches once an operation has completed.

中间件

¥Middleware

type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch

中间件是一个高阶函数,它组成 调度功能 以返回新的调度函数。它常常把 异步操作 变成行动。

¥A middleware is a higher-order function that composes a dispatch function to return a new dispatch function. It often turns async actions into actions.

中间件可以使用函数组合来组合。它对于记录操作、执行路由等副作用或将异步 API 调用转换为一系列同步操作非常有用。

¥Middleware is composable using function composition. It is useful for logging actions, performing side effects like routing, or turning an asynchronous API call into a series of synchronous actions.

有关中间件的详细信息,请参阅 applyMiddleware(...middlewares)

¥See applyMiddleware(...middlewares) for a detailed look at middleware.

存储

¥Store

type Store = {
dispatch: Dispatch
getState: () => State
subscribe: (listener: () => void) => () => void
replaceReducer: (reducer: Reducer) => void
}

存储是保存应用状态树的对象。Redux 应用中应该只有一个存储,因为组合发生在 reducer 级别。

¥A store is an object that holds the application's state tree. There should only be a single store in a Redux app, as the composition happens on the reducer level.

有关更多详细信息,请参阅完整的 存储 API 参考

¥See the complete store API reference for more details.

存储创建者

¥Store creator

type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store

存储创建器是创建 Redux 存储的函数。与调度函数一样,我们必须区分从 Redux 包导出的基础存储创建者(createStore(reducer, preloadedState))和从存储增强器返回的存储创建者。

¥A store creator is a function that creates a Redux store. Like with dispatching function, we must distinguish the base store creator, createStore(reducer, preloadedState) exported from the Redux package, from store creators that are returned from the store enhancers.

存储增强剂

¥Store enhancer

type StoreEnhancer = (next: StoreCreator) => StoreCreator

存储增强器是一个高阶函数,它组成存储创建者以返回新的增强存储创建者。这与中间件类似,它允许你以可组合的方式更改存储界面。

¥A store enhancer is a higher-order function that composes a store creator to return a new enhanced store creator. This is similar to middleware in that it allows you to alter the store interface in a composable way.

存储增强器与 React 中的高阶组件的概念非常相似,有时也称为“组件增强器”。

¥Store enhancers are much the same concept as higher-order components in React, which are also occasionally called “component enhancers”.

由于存储不是实例,而是函数的普通对象集合,因此可以轻松创建和修改副本,而无需更改原始存储。compose 文档中有一个示例证明了这一点。

¥Because a store is not an instance, but rather a plain-object collection of functions, copies can be easily created and modified without mutating the original store. There is an example in compose documentation demonstrating that.

你很可能永远不会编写存储增强器,但你可以使用 开发者工具 提供的存储增强器。这使得时间旅行成为可能,而应用却没有意识到它正在发生。有趣的是,Redux 中间件实现 本身就是一个存储增强器。

¥Most likely you'll never write a store enhancer, but you may use the one provided by the developer tools. It is what makes time travel possible without the app being aware it is happening. Amusingly, the Redux middleware implementation is itself a store enhancer.