首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
V2EX  ›  JavaScript

简单的(10 多行代码) 基于 TypeScript 的 Redux 核心实现及应用

  •  
  •   banxi1988 · 69 天前 · 351 次点击
    这是一个创建于 69 天前的主题,其中的信息可能已经有所发展或是发生改变。

    希望以下代码用帮助大家理解 Redux 的工作原理.

    createStore 函数实现如下:

    
    type StoreListener = () => void;
    
    interface Action {
      type: string;
    }
    
    interface State {}
    
    function createStore<S extends State, T extends Action>(reducer: (state: S, action: T) => S) {
      let state: S = {} as any;
      const listeners: StoreListener[] = [];
      const getState = () => {
        return state;
      };
      const subscribe = (listener: StoreListener) => {
        listeners.push(listener);
        const unsubscribe = () => {
          const index = listeners.indexOf(listener);
          listeners.splice(index, 1);
        };
        return unsubscribe;
      };
    
      const dispatch = (action: T) => {
        state = reducer(state, action);
        listeners.forEach(listener => listener());
      };
    
      dispatch({ type: "" } as T);
      return { dispatch, subscribe, getState };
    }
    

    使用示例如下:

    
    interface TodoAction extends Action {
      todo: Todo;
    }
    
    interface TodoState extends State {
      todos: Todo[];
    }
    
    const todoStore = createStore<TodoState, TodoAction>((state, action) => {
      if (!action.type) {
        const todos = [
          new Todo("学习 React", [BuiltinTag.IMPORTANT, BuiltinTag.URGENT]),
          new Todo("学习 TypeScript", [BuiltinTag.IMPORTANT]),
          new Todo("学习 CSS")
        ];
        return { ...state, todos };
      } else {
        const todos = state.todos.slice(); // 复制
        switch (action.type) {
          case TodoActionType.ADD:
            todos.push(action.todo);
            break;
          case TodoActionType.REMOVE:
            const index = todos.indexOf(action.todo);
            todos.splice(index, 1);
        }
        return { ...state, todos };
      }
    });
    
    3 回复  |  直到 2019-09-11 07:31:17 +08:00
        1
    banxi1988   69 天前
    @Livid 降级有什么什么解除降级的办法?(除了重新注册账号).
    降级之后在问答区提问根本就看不到自己刚发的帖子.
        2
    FaiChou   64 天前   ♥ 1
    这不就是 egghead 上 Dan 的视频教程内容么 ?
    不过这个 redux 教程对新手启发还是挺大的
        3
    banxi1988   63 天前
    @FaiChou #2 egghead 上的视频我没有看,改天学习一下.
    我近期也录了一个对应视频. 我感觉自己实现一遍就算是极简的实现也比单纯的看技术文章介绍的好.
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1075 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 20ms · UTC 23:02 · PVG 07:02 · LAX 15:02 · JFK 18:02
    ♥ Do have faith in what you're doing.