Skip to content

Latest commit

 

History

History
123 lines (106 loc) · 4.46 KB

11.md

File metadata and controls

123 lines (106 loc) · 4.46 KB
Raw

编写代办事项列表的 Reducer （添加一个代办事项）

对应视频：http://video.sike.io/javascript-redux-writing-a-todo-list-reducer-adding-a-todo

本节使用到的环境：https://jsbin.com/kaboqe/edit?js,console

为 todo 应用编写 reducer(1/2)

就像之前写计数器的 reducer 那样，我们依然使用测试驱动开发，编写一个 todo 应用的“状态计算器” (reducer).

不同的是我们这次将加入 deepFreeze 来保护应用状态不被修改。

添加 todo

我们首先要写的是处理添加 todo 的逻辑。

todo 应该被包含在一个数组里面。每一个 todo 都有标号和内容，以及它们的完成状态，默认是未完成的。

const todos = (state = [], action) => {

};

const testAddTodo = () => {
  const stateBefore = [];
  const action = {
    type: 'ADD_TODO',
    id: 0,
    text: 'Learn Redux'
  };
  const stateAfter = [
    {
      id: 0,
      text: 'Learn Redux',
      completed: false
    }
  ];
};

为了确保 reducer 是纯函数，我们将使用 deepFreeze 来 “冰冻” stateBefore 和 action.

const testAddTodo = () => {
  //...
  deepFreeze(stateBefore);
  deepFreeze(action);
  expect(
    todos(stateBefore, action)
  ).toEqual(stateAfter);
};

接下来就可以开始实现 reducer 对应的添加 todo 功能了。

const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false // 默认值
        }
      ];
      default:
        return state;
  }
};

需要注意：

  • 要使用非转变方法去计算新的数组。
  • 状态的初始化值。
  • 遇到无法处理的动作总是返回当前状态。

现在执行测试，可以完美通过～

// ...前面写的代码
testAddTodo();
console.log('测试通过！');

总结

  • reducer 接受当前状态和被分发的动作，计算应用下一个状态。
    • 纯函数。
    • 判断 action.type 去计算不同的状态变化。
    • 总是处理未知的动作。
    • 总是处理未初始化的状态。
  • 通过确认在触发动作后与预期一致确保 reducer 符合要求。

导航

  1. 不可变的单一状态树
  2. 用动作描述状态变化
  3. 纯函数和非纯函数
  4. reducer 函数
  5. 为计数器编写一个带有测试的 reducer 函数
  6. store 方法：getState，dispatch 和 subscribe
  7. 从头实现 store
  8. React 计数器示例
  9. 使用 slice()，concat() 和 ...(展开运算符) 来避免修改数组
  10. 使用 Object.assign() 和 ...(展开运算符) 来避免修改对象
  11. 编写代办事项列表的 Reducer （添加一个代办事项）
  12. 编写代办事项列表的 Reducer （切换代办事项的完成状态）
  13. “Reducer 组合”和数组
  14. “Reducer 组合”和对象
  15. 使用 combineReducers() 实现 Reducer组合
  16. 从头实现 combineReducer()
  17. React 代办事项列表示例（添加一个代办事项）
  18. React 代办事项列表示例（切换代办事项的完成状态）
  19. React 代办事项列表示例（过滤代办事项）
  20. 提取展示型组件（ TODO, TODOLIST ）
  21. 提取展示型组件（ AddTodo, Footer, FilterLink ）
  22. 提取容器组件 ( FILTERLINK ）
  23. 提取容器组件 ( VisibleTodoList, AddTodo ）
  24. 通过 props 显式地向下传递 store
  25. 通过 context 隐式地向下传递 store
  26. 使用 React Redux 的 传递 store
  27. 使用 React Redux 的 connect() 生成容器 （ VisibleTodoList ）
  28. 使用 React Redux 的 connect() 生成容器 （ AddTodo ）
  29. 使用 React Redux 的 connect() 生成容器 （ FooterLink ）
  30. 提取动作创造器

下一节