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

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

  •  
  •   banxi1988 · 2019-09-05 12:31:46 +08:00 · 2221 次点击
    这是一个创建于 1666 天前的主题,其中的信息可能已经有所发展或是发生改变。

    希望以下代码用帮助大家理解 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
    banxi1988
        1
    banxi1988  
    OP
       2019-09-05 12:34:04 +08:00
    @Livid 降级有什么什么解除降级的办法?(除了重新注册账号).
    降级之后在问答区提问根本就看不到自己刚发的帖子.
    FaiChou
        2
    FaiChou  
       2019-09-10 10:42:13 +08:00   ❤️ 1
    这不就是 egghead 上 Dan 的视频教程内容么 ?
    不过这个 redux 教程对新手启发还是挺大的
    banxi1988
        3
    banxi1988  
    OP
       2019-09-11 07:31:17 +08:00
    @FaiChou #2 egghead 上的视频我没有看,改天学习一下.
    我近期也录了一个对应视频. 我感觉自己实现一遍就算是极简的实现也比单纯的看技术文章介绍的好.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3472 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:57 · PVG 18:57 · LAX 03:57 · JFK 06:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.