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

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