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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1906 天前的主题，其中的信息可能已经有所发展或是发生改变。

希望以下代码用帮助大家理解 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

2019-09-05 12:34:04 +08:00

@Livid 降级有什么什么解除降级的办法?(除了重新注册账号).
降级之后在问答区提问根本就看不到自己刚发的帖子.

FaiChou

2019-09-10 10:42:13 +08:00

这不就是 egghead 上 Dan 的视频教程内容么 ?
不过这个 redux 教程对新手启发还是挺大的

banxi1988

2019-09-11 07:31:17 +08:00

@FaiChou #2 egghead 上的视频我没有看,改天学习一下.
我近期也录了一个对应视频. 我感觉自己实现一遍就算是极简的实现也比单纯的看技术文章介绍的好.