Redux-API

最新推荐文章于 2022-07-10 17:14:12 发布

安和-

最新推荐文章于 2022-07-10 17:14:12 发布

阅读量1.5k

点赞数

分类专栏： node 文章标签： Redux API

本文链接：https://blog.csdn.net/tang_yi_/article/details/77949112

版权

node 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、createStore()

createStore(reducer, [initialState], enhancer)：创建一个 Redux store 来以存放应用中所有的 state。应用中应有仅有一个 store。

参数：

reducer（function）：接收两个参数，分别是当前的 state 树和要处理的 action，返回新的 state 树。
[initialState]（arry）：初始时的state。在同构应用中，可以决定是否把服务端传来的 state 水合后（hydrate）传给他，或者从之前保存的用户会话中恢复一个传给他。如果你使用 combineReducers 创建 Reducer，它必须是一个普通对象，与传入的 keys 保持同样的结构，否则，可传入任意 Reducer。
enhancer（function）：Store enhancer 是一个组合 Store creator 的高阶函数，返回一个新的强化过的 store creator。这与 middleware 相似，它也允许通过符合函数改变 store 接口。

返回值：
（store）：保存了应用所有 state 的对象。改变 state 的唯一方法是 dispatch action。你也可以 subscribe 监听 state 的变化。然后更新 UI。

注意：

应用中不要创建多个 store，相反，使用 combineReducers 来把多个 Reducer 创建成一个根 Reducer。
若 state 是普通对象，永远不要修改它。

2、Store

Store 就是维持应用所有的 state 树的一个对象。改变 store 内 state 的唯一途径是对它 dispatch 一个 action。
Store 不是类，它只是有几个方法的对象。要创建它，只需把根部的 reducing 函数传递给 createStore。

Store 方法：

getState()
dispatch(action)
subscribe(listenter)
replaceReducer(nextReducer)

（1）getState()
返回应用当前的 state 树，它与 store 的最后一个 Reducer 返回值相同。

（2）dispatch(action)
分发 action，这是触发 state 变化的唯一途径。会使用当前 getState() 的结果和传入的 action 以同步方式的调用 store 的 Reducer 函数。返回值会被作为下一个 state。从现在开始，这就成为 getState 的返回值，通知变化监听器会被触发。

参数：

action （Object）：描述应用变化的普通对象。Action 是把数据传入 store 的唯一途径。所以任何数据无论来自 UI 事件，网络回调或者是其他资源如 websockets，最终都应该以 action 的形式被 dispatch。按照约定，action 具有 type 字段来表示他的类型。type 也可以被定义为常量或者从其他模块引入。最好使用字符串，而不是 Symbols 作为 action，因为字符串是可以被序列化的。除了 type 字段外，action 对象的结构可以自由定。

返回值：（Object）：要 dispatch 的 action

注意：
使用 createStore 创建的 “纯正” store 只支持普通对象类型的 action，而且会立即传到 reducer 来执行。但是，若使用 applyMiddleware 来套住 createStore 时，middleware 可以修改 action 的执行，并支持执行 dispatch 异步操作。

（3）subscribe(listener)
添加一个变化监听器。每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。你可以在回调函数里 getState() 来拿到当前 state。
这是个底层 API。多数情况下，不会直接使用它，会使用一些 React（或其它库）的绑定。
如果需要解绑这个变化监听器，执行 subscribe 返回的函数即可。

参数：

listener （function）：每当 dispatch action 的时候都会执行的回调。state 树中的一部分可能已经变化。可以在回调函数中调用 getState 来拿到当前 state。store 的 reducer 应该是纯函数，因此，可能需要对 state 树中的引用做深度比较来确定他的值是否有变化。

返回值：（function）：一个可以解绑变化监听器的函数。

（4）replaceReducer(nextReducer)
替换 store 当前来计算 state 的 reducer。
参数：reducer（function）：store 会使用的下一个 reducer。

3、combineReducers(reducers)

随着应用变得复杂，需要对 reducer 函数进行拆分，拆分后的每一块独立负责管理 state 的一部分。
combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 Object，合并成一个最终的 reducer 函数，然后可以用这个 reducer 调用 createStore。合并后的 reducer 可以调用各个子 reducer，并把它们的结果合并成一个 state 对象。state 对象的结构由传入的多个 reducer 的 key 决定。最终，state 对象的结构会是这样的：

{
    reducer1: ....
    reducer2: ....
}

通过传入对象的 reducer 命名来控制 state key 的命名。例如，你可以调用 combineReducers({todos:myTodo, counter: myCounter}) 将 state 结构变为 {todos， counter}。

参数：

reducers（Object）：一个对象，它的值对应不同的 reducer 函数，这些 reducer 函数后面会被合并成一个。

返回值：（function）：一个调用 reducers 对象里所有 reducer 的 reducer，并构建一个与 reducers 对象结构相同的 state 对象。

注意：每个传入 combineReducers 的 reducer 都需要满足以下规则：

所有未匹配的 action，必须把它接收到的第一个参数也就是哪个 state 原封不动返回。
永远不能返回 undefined。当过早 return 时非常容易犯这个错误，为了避免错误扩散，遇到这种情况，combineReducers 会抛出异常。
如果传入的 state 就是 undefined，一定要返回对应 reducer 的初始 state。根据上一条规则，初始 state 禁止使用 undefined。

4、applyMiddleware(…middlewares)

let store = createStore(rootReducer,applyMiddleware(...middleware))

参数：
…middlewares（arguments）：遵循 Redux middleware API 的函数。每个 middleware 接受 store 的 dispatch 和 getState 函数作为命名参数，并返回一个函数，该函数会被传入称为 next 的下一个 middleware 的 dispatch 方法，并返回一个接受 action 的新函数，这个函数可以直接调用 next(action) ，或者在其他需要的时刻调用，甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法做为 next 参数，并借此结束调用链。所以，middleware 的函数签名是 ({ getState, dispatch }) => next => action。

返回值：（function）一个应用了 middleware 后的 store enhancer。这个 store enhancer 就是一个函数，并且需要应用到 createStore 。它会返回一个应用了 middleware 的新的 createStore。