配合源代碼學習吧~ ： 我是源代碼

這一分支講的是 如何完整地(不包含優化，也沒有好看的頁面) 搭建一個 增刪改查 的 react-redux 系統

• 不同於上一節的 react-redux，這裏主要采用 函數式組件。 函數式組件 = 函數式的寫法 + 不需要state的組件。

  其實函數式組件也就那麽回事。 如果組件本身 沒有需要 維護的 state，我們就可以使用 函數式組件。

• react-redux 的一部分難度來源於 connect，其實它就是一個。。。 高階函數！就是我們上一節說的。
  • 作用：連接React組件與 Redux store。
  • connect之所以會成功，是因為Provider組件：在原應用組件上包裹一層，使原來整個應用成為Provider的子組件

  • 其實它主要是一個鏈接函數，而它內部的參數是有固定格式的，比若說

    connect([toProps函數，叫什麽不重要], [mapDispatch函數], [mergeProps], [optiosn]);
    toProps(state, ownProps) => 將 store 的數據映射到 props 上綁定。
    toDispatch(dispatch, ownProps) => 將 action 的函數映射到 props 上綁定。
    剩下兩個一般不用。

• 還有一部分的難度在於 redux 的拆分，這個官網已經有例子了，這裏就不放代碼啦。

一步一步的優化

• 從 class 類的寫法到 函數式的寫法
• 從集成的 reducer 到拆分的 reducer

• 我們可以增加 保存在本地的 localStorage 來讓我們的 app 更加真實一點

  轉成localStorage的過程中要註意，之前寫的 toggle 函數(simple組件)中的 index 和 id 需要改動。
  onClick={() => itemClick(item.id)}

• 我們可以給我們的 App 添加上適當的樣式，讓其看起來真的想一個 todolist。

其他

• form表單提交的時候會刷新頁面。如果不希望刷新的話，需要：

  例如，如果 type 屬性是 "submit"，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。

• e.preventDefault(); 可以阻止諸如 提交的默認事件。

• 除此之外，e.stopPropagation(); 可以阻止事件冒泡，順帶了解一下。

redux超易學三篇之三（一個邏輯完整的react-redux)