词汇表

最后更新于:2022-04-01 05:00:54

# 词汇表 这是有关Redux中的一些核心概念的词汇表,以及他们的类型签名。这些类型使用了 [流标注法](http://flowtype.org/docs/quick-reference.html)进行记录。 ### State ~~~ type State = any; ~~~ *State* (也叫 *state tree*) 是一个宽泛的概念,但是在 Redux API 中它通常与被 store 所管理的,可以被 [`getState()`](#) 返回的,单独 state 值相关。 它表示了一个 Redux应用的全部状态,通常为一个多层嵌套的对象。 约定俗成,顶层 state 为一个对象,或几个像 Map 那样的键-值集合,当然是任意类型的话也成。当然,你仍然可以尽可能保持状态的串行化。不要把什么都放进去导致无法容易地转换成 JSON。 ### Action ~~~ type Action = Object; ~~~ *Action* 是一个用以表示要改变的 state 的意图的普通对象。Action 是将数据拿到 store 里的唯一方法。无论是 UI 事件,网络回调,还是其他诸如 WebSocket 之类的其他源,任何数据都或多或少的被 dispatch 成 action。 约定俗成,action 应该有一个 `type` 域指明了需要被演算的 action 类型。Type 可以被定义为常数从其他 module 中导入。比起用 [Symbols](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Symbol) 表示 `type` 使用 String 是更好的方法因为 string 是可被串行化的。 除了 `type`之外,action 对象的结构其实完全取决于你自己。如果你感兴趣的话,请参考 [Flux Standard Action](https://github.com/acdlite/flux-standard-action) 作为如何组织 actions 的建议。 还有就是请看后面的 [异步 action](#)。 ### Reducer ~~~ type Reducer<S, A> = (state: S, action: A) => S; ~~~ *Reducer* (也叫 *reducing function*) 是一个接受累积运算和一个值,返回新的累积函数的函数。用来把一个集合 reduce 到一个单独值。 Reducer 并不是 Redux 特有的——它是函数式编程中的一个基本概念。甚至大部分的非函数式语言比如 JavaScript,都有一个内建的 reduce API。在 JavaScript 中的话是 [`Array.prototype.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce). 在 Redux 中,累计运算的结果是个 state 对象,被累积的值就是 action。Reducer 由上一个 state 和一个 action 计算得到一个新 state。它必须是 *纯函数* 也就是由完全相同的输入会返回完全相同的输出。它应该是没有副作用的。这使得一些很棒的功能诸如热重载和时间旅行成为可能。 Reducer 是 Redux 之中最重要的概念。 *不要在 reducer 中有 API 调用* ### dispatch function ~~~ type BaseDispatch = (a: Action) => Action; type Dispatch = (a: Action | AsyncAction) => any; ~~~ 一个 *dispatching function* (或者简单点叫 *dispatch function*) 是一个接收一个 action 或者[异步 action](#)的函数,它可以或不可以分发一个或多个 action 到 store。 我们必须搞清 dispatch function 和由没有 middleware 的 store 实例提供的 base [`dispatch`](#) function 其中的区别。 Base dispatch function *总是* 同步发 action 给 store 的 reducer,以及由 store 返回的上一个 state 计算出新 state。它期望 actions 会是一个准备好被 reducer 消费掉的普通对象。 [ Middleware ](#) 封装了base dispatch function。它允许了 dispatch function 处理 action 之外的 [异步 action](#)。 middleware 可以被变形,延迟,忽略,以及其他在将 action 或异步 action 传递给下一个 middleware 之前作出解释。获取更多信息请往后看。 ### Action Creator ~~~ type ActionCreator = (...args: any) => Action | AsyncAction; ~~~ *Action Creator* 很简单,就是一个创建 action 的函数。别把这两个概念搞混。Action 是一个信息的负载,而 action 创建者是一个创建 action 的工厂。 调用 action creator 只会生产出 action,但不分发。你需要调用 store 的 [`dispatch`](#) function 才会真正引起变化。有时我们讲 *bound action creator* 意味着函数调用 action creator并立即将结果分发给一个特定的 store 实例。 如果 action 创建者需要读取当前状态、做出 API 调用、或引起诸如路由变位等副作用,应该返回一个 [异步 action](#) 而不是 action。 ### 异步 Action ~~~ type AsyncAction = any; ~~~ *异步 action* 是一个发给分发函数,但还没有准备好被 reducer 消费的值。它会在被发往 base [`dispatch()`](#) function 之前,被 [ middleware ](#) 变为一个或一组 action。异步 actions 可以有多个 type,取决于使用的 middleware。通常为 Promise 或者 thunk 之类的异步原生,虽然没有被马上传给 reducer,但是操作一旦完成就会触发 action 分发。 ### Middleware ~~~ type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }; type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch; ~~~ Middleware 是一个高阶函数,它将 [dispatch function](#) 组合并返回一个新的 dispatch function。它通常将 [异步 actions](#) 变为 actions。 Middleware 是使用了复合函数的可构建的。它可在 action 日志,表现副作用例如路由,或将异步 API 调用变为一组同步 actions。 请见 [`applyMiddleware(...middlewares)`](#) 获取有关 middleware 的详细内容。 ### Store ~~~ type Store = { dispatch: Dispatch; getState: () => State; subscribe: (listener: () => void) => () => void; getReducer: () => Reducer; replaceReducer: (reducer: Reducer) => void; }; ~~~ Store 是一个承载有应用 state tree 的对象。一个 Redux 应用中应当只有一个 Store,因为构建发生于 reducer 级。 - [`dispatch(action)`](#) 是上面描述过的 base dispatch function。 - [`getState()`](#) 返回当前 store 的 state。 - [`subscribe(listener)`](#) 注册 funtion 用于在 state 改变时调用。 - [`getReducer()`](#) 和 [`replaceReducer(nextReducer)`](#) 可被用于实现热重载荷代码分割。通常你用不上他们。 请见完整的 [store API reference](#) 获取更多细节。 ### Store Creator ~~~ type StoreCreator = (reducer: Reducer, initialState: ?State) => Store; ~~~ Store creator 是一个创建 Redux store 的函数。就像 dispatching function 那样,我们必须分清由 [`createStore(reducer, initialState)`](#) 从 Redux 包中导出的 base store creator,和从 store enhancer 返回的 store creator。 ### Store enhancer ~~~ type StoreEnhancer = (next: StoreCreator) => StoreCreator; ~~~ Store enhancer 是一个高阶函数,将 store creator 组合,返回一个新的强化过的 store creator。这与允许你使用可组合方式变更 store 接口的 middleware 有点相似。 Store enhancer 是与 React 中概念非常相同的高阶 component, 通常也会被叫做 “component enhancers”。 因为 store 并非一个实例,而更像是几个函数的集合普通对象。复制可以被简单的创建或修改而不需变动原先的 store。在 [`compose`](#) 文档中有一个示例演示了这种做法。 大多数时候你不可能去写 store enhancer,但你会用得着 [developer tools](https://github.com/gaearon/redux-devtools) 提供的。它使得app对其发生无察觉的时间旅行变得可能。搞笑的是,[Redux middleware 的实现](#) 本身就是一个 store enhancer。
';