react+redux官方執行個體TODO從最簡單的入門（2）-- 增

標籤：配置環境   例子   index   bsp   htm   準備   入門   狀態   9.png   

　　雖然官網的TodoList的例子寫的很詳細，但是都是一步到位，就是給你一個action，好傢夥，全部都寫好了，給你一個reducer，所有功能也是都寫好了，但是我們這些小白怎麼可能一下就消化那麼多，那我們就來拆解，一步一步實現，試想我們開發程式也是一個一個功能區域實現，那麼我們第一步就是先把整體結構構思出來，然後先把頭部做出來，這樣看是不是簡單很多！

　　從官網下載的mode，然後配置什麼的，我也不會弄，把裡面的東西全刪了，然後自己一個一個寫，不然學一個react還要學配置環境，時間又沒多少了，大致結構是這樣的

　　

　　首先我們要完成最基礎的布局：入口檔案index.js，容器組件containers，reducers，子組件components，還有就是index.html，最基礎的準備好了，至少能在頁面上顯示出來了

　　其實TodoList一共講了我們最常用的4個功能，增-刪-改-查，那麼我們就一個一個實現，首先實現的是增

　　入口檔案 ： index.js

　　

　　容器組件：(這裡一定注意props,一層一層傳遞，要在其父級有這個東西才能向下傳，比如這裡的addTodo={action.addTodo},要有這個東西)

　　

　　

 

 

　　展示組件：

　　

　　到這裡用了上一級的this.props.addTodo,注意到了嗎

　　

 　　最底層的子組件，方法在這裡實現，一層一層傳遞上去到頂層，更新state

　　

 

　　申明狀態：contants

　　

　　

　　action：約定要幹什麼（action和reducer兩個好基友負責更新state）

　　

　　

　　reducers：

　　

 

 　　todos.js

　　　

　　index.js

　　

 

　　

 　　一般把狀態單獨列出來

　　這裡寫在contants裡面（隨著狀態的增多，會組件增多，單獨寫出來，也是為了容易維護）

 　　

　　

　　到這一步，增基本是實現了，看chrome的調試工具：初始資料

　　

 

 　　現在我們輸入幾個text看變化

 　　

　　

　　這就是頂層的action和store，沒什麼神秘的，看到了吧，第一步增就實現了，為了很好的顯示出來，我們做一個簡陋的view，更直觀

　　增加一個外殼MainSextion，用來裝資料的外層

　　

　　

　　子組件TodoItem，用來規劃每一個顯示的樣式

　　

 

 　　再把這個放進容器組件

　　

　　大功告成，來看看效果吧

　　

　　多來幾個

　　

 

 

　　

 

 

 

 

 

　　

　　

 

react+redux官方執行個體TODO從最簡單的入門（2）-- 增