Redux 封装！

115 阅读 0 评论 76 点赞

我是靠谱客的博主魔幻月饼，这篇文章主要介绍Redux 封装！，现在分享给大家，希望可以做个参考。

React
redux 是（React全家桶）的核心成员
Redux 封装

我们将最新状态放到了createStore函数中进行封装！^_,生成 dispatch函数，操作 state，触发视图更新。(redux.js)

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
export function createStore(reducer) {
<-- 给 state一个为 null的初始值 -->
let state;
<-- 创建一个放置事件的事件池(数组) -->
const listener = [];
<-- 这个函数负责向事件池中添加事件； -->
const subscribe = (f) => listener.push(f);
<-- 这个函数负责获取当前 state值，创造一份和状态同样的对象给外界来用 -->
const getState = () => { return state };
<-- 获取旧的 state值 -->
let oldState = state;
<-- 这个函数负责获取当前用户传输的 action实参 -->
const dispatch = (action) => {
<-- 获取曾经还未覆盖的 start值 -->
oldState = state;
<-- 获取当前 state值覆盖掉store中旧的 state值 -->
state = reducer(state, action);
<-- 更新完成之后 重新渲染，把 state上一次旧的值添加到事件池 -->
listener.forEach(item => item && item(oldState));
}
<-- 默认传入空对象获取reducer返回的默认结果，为了初始化数据 -->
dispatch({});
return {
getState,
dispatch,
subscribe,
listener
}
}