Level 25. 整合 ImmutableJS

歡迎來到「24 小時，React 快速入門」系列教學 🎓 Level 25 ～！

：Wish you have a happy learning!

🏁 關卡目標

1. 完成主線任務：整合 ImmutableJS
2. 獲得新技能：
3. [ImmutableJS] 了解 ImmutableJS 的使用方法

🚩 主線任務

1. 引入 Immutable.js

從 cdnjs 中，複製 immutable 最新版本的連結，並貼到 index.html 中。

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.0/immutable.js"></script>

2. 修改 ./reducers/todos.js

// 1. 引入 List 和 Record
const { List, Record } = Immutable;

// 2. 將 Todo Model 定義為 Immutable 的 Record
const TodoRecord = Record({
  id: undefined,
  title: undefined,
  completed: false
});

// 3. 將尋找 Todo 清單某筆 Todo 的 index 的邏輯拉出來
const _findIdxById = (todos, id) => todos.findIndex((todo) => todo.id === id);

// 4. 使用 List 的 push() 重構
const _createTodo = (todos, title) =>
  todos.push(new TodoRecord({
    id: todos.last().id + 1,
    title,
    completed: false
  }));

// 5. 使用 List 的 setIn() 重構
const _updateTodo = (todos, id, title) =>
  todos.setIn([ _findIdxById(todos, id), 'title' ], title);

// 6. 使用 List 的 setIn() 重構
const _toggleTodo = (todos, id, completed) =>
  todos.setIn([ _findIdxById(todos, id), 'completed' ], completed);

// 7. 使用 List 的 delete() 重構
const _deleteTodo = (todos, id) =>
  todos.delete(_findIdxById(todos, id));

// 8. 預設的 state 修改成 new List()
window.App.reducers.todos = (state = new List(), action) => {
  // ...
};

📖 閱讀筆記

1. [ImmutableJS] 了解 ImmutableJS 的使用方法

參考文件：

• ImmutableJS

🚀

｜ 主頁 ｜ 上一關 ｜ 完 🎓 ｜

｜ 🙋 我要提問 ｜