坚持造轮子第四天 - 统一状态管理

坚持造轮子第四天 - 统一状态管理

二话不说 轮子我都会造 还怕你面试问吗？ 一天造一个轮子，干就完了。

看点

• 针对大厂笔试、面试必考手写题目
• TDD方式开发
• 配合视频讲解

造轮子计划

（计划赶不上变化 随时迭代 欢迎留言 随时摸鱼）

• 框架基础
  • 模板引擎
  • 防抖、节流
  • 数据响应式
  • 统一状态管理
  • 时间旅行
  • 洋葱圈Compose
  • Flux模式
  • Promise
  • Thunk
  • HTML编译器
  • Pipe管道
  • 原生Ajax
• JS基础
  • Promise.all/race
  • 路由
  • new
  • call/apply/bind
  • Object.create
  • 深拷贝、浅拷贝
• 算法、设计模式
  • 二分查找
  • 快排
  • 二分查找
  • 冒泡排序
  • 选择排序
  • 订阅发布
  • 斐波那契算法
  • 去重

统一状态管理

若是编写一个复杂的前端程序，不太可能让组件各自为政。状态和行为逻辑都分散在各自组件内部，很难统一管理，那也就很难作大.好比: 你们想一想作一个在线版的Excel或者PS 又或者后面咱们要写的VSCode应该怎么作？里面的各类组件互动，Undo、Redo、行为记录怎么作？在线版王者荣耀如何播放视频录像，如何直播？

要完成这样的功能须要三个要求：

• 单一数据源 : 就是状态数据统一放在一块儿

• 保持状态只读 : 状态数据谁都不能改，须要改的话找管理员赞成修改

• 数据修改使用纯函数 : 修改数据的方法也要统一管理，这样容易回退，记录复现、时间旅行

• 状态通知 : 状态修改能够获得通知，固然不少人都要收听这个最好使用订阅发布模式。这个不是刚需，我就一个地方用用怎么了。谁变了我整个视图都刷新。因此我们拆解开，此次只知足能触发状态变动通知就好了。后面设计模式我们在慢慢盘这些东西。

需求

1. 经过dispatch修改状态

2. 状态变动后触发通知

it("基本功能 订阅通知 改变状态", () => {
    const { createStore } = require("../index");
    const mockFn = jest.fn();
    const store = createStore(reducer);

    // 创建响应订阅
    store.effect(mockFn);
    store.dispatch({
      type: "clear",
    });
    // store.dispatch({ type: "add", payload: 1 });

    const calls = mockFn.mock.calls;

    // 断言 mock方法只调用一次
    expect(calls.length).toBe(1);
    expect(store.getState().num).toBe(0);
  });
复制代码

功能实现

超级简单是吧 我就解释了

module.exports.createStore = (reducer, preloadedState) => {
  let currentReducer = reducer; //reducer函数
  let currentState = preloadedState; //默认state
  let effective 
  return {
    getState() {
      return currentState;
    },
    dispatch(action) {
        currentState = currentReducer(currentState, action);
        // 触发通知
        effective()
    },
    effect(fn) {
        effective = fn;
    },
  };
};

复制代码

测试

OK 任务完成

遗留问题 - 后续解决

主要是咱们拆解了和统一状态管理不强绑定的问题。

1. 变动通知订阅

固然这个实现订阅发布模式就好了

2. 异步Action的处理

大概两个方案Thunk方案 和 Promise方案 这个等咱们后续分别造完Thunk和 Promise轮子再说

3. 状态日志

这个须要引入中间件洋葱圈模型也就是实现责任链模式

4. 和时间旅行

这个须要实现备忘录设计模式

关注全栈然叔 带你坚持每天造轮子 （周末休息 拒绝996）

• 公众号搜索： 【前端大班车】 其余精彩内容

• 源码地址 github.com/su37josephx…