ES6+redux實現Counter

react說白了就是用jsx開發一個view層的東西,若是你要想開發一些web端的網頁應用,你須要作的就是結合起目前能夠管理數據端的一些應用,今天咱們說到的是redux,redux我目前學習的也不是很深,先後差很少10天時間,只談一下本身的理解!html

網絡上有不少關於redux的講解,目前以爲阮一峯大神的最適合入門者初學,http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.htmlreact

redux是經過什麼樣的方式管理數據?組件之間怎麼實現通訊?怎麼實現單向數據流?webpack

大致上的redux的過程就分爲三步:es6

1.用戶觸發了事件,action發送一個state到reducer裏面去web

2.reducer根據action+state而後生成新的stateredux

3.新state經過屬性顯示到view層上面網絡

 

下面講的仔細一點:異步

1.首先是咱們爲何要用redux?何時用?何時能夠不用?
其實大部分的狀況咱們均可以不用使用redux的,若是嵌套的層次不高,交互性也不高,具體的能夠在阮一峯的學習筆記上面看到,網址在最上面ide

2.既然咱們用了redux,redux具體有哪些好處?函數

redux實現的最大的好處就是他可讓每一種state對應一種view,這樣能夠實現記憶功能,並且數據便於管理

3.怎麼使用redux?
咱們藉助redux文件夾下面examples裏面的real-world例子文件目錄去看一下

實際上咱們最好的是新建action,由於你能夠先肯定有哪些功能並且是不和其餘文件起衝突的,不依賴其餘的文件,新建文件夾順序

action(constants,middleware)——>reducers——>store——>comonents——>containers——>index.js

containers文件通常是須要輸入一個容器組件,而後咱們在index.js中經過Provider方法把store注入到容器組件,

因此containers中的組件是須要被connect方法處理過的,被connect方法處理過的UI組件會變成容器組件

4.咱們再具體說一下怎麼去操做?

從action提及,action裏面咱們首先要 export const ADD_TODO="ADD_TODO"

這邊有兩個問題,爲何要用const定義,在ES6中定義有額外的兩種方法,let和const的區別在於,const申明的變量須要在聲明的時候必須賦值並且後面不能夠任意修改,修改會報錯,那麼ok,咱們爲何要用變量去替換字符串?爲了在使用的時候不出錯,咱們最好用變量替換掉。

結束了定義變量的部分那麼咱們須要寫什麼呢?

固然是actionCreators,咱們定義一種view對應一種state,那麼生成這一種state咱們固然得用一種action,一種action表明的是一種功能,寫法以下:

export function  addTodo(text){return {type:ADD_TODO,text}}

很明顯,一旦咱們調用函數會返回一個包含type的對象,text是什麼?當前是咱們要操做的數據啦!action對reducer說,我這種type你須要做出的迴應是刪除數據,reducer說你要把數據給我啊,text就是這個

constants通常儲存的是咱們的字符串到變量的替換過程,咱們能夠用 import * as types from "地址"所有調用過來而後咱們再用types.ADD_TODO調用其中的一個也是能夠的,固然咱們用import{ADD_TODO} from "地址"調用也是能夠的對吧!

middleware是個什麼東西呢?中間件的使用以及異步的操做過程能夠詳見阮一峯的第二篇文章,最上面的網址

那麼text怎麼到action裏面的?咱們後面說

那麼咱們的action已經寫完了,接下來咱們須要寫reducers,什麼是reducers,是純函數,是一種接受咱們的state和action能夠生成新state的東西,說白了action只發布命令,作事的就是reducer,那麼咱們應用的reducers愈來愈多的時候咱們能夠把他們拆分開來,爲何咱們能夠拆分?由於每種功能之間互不影響,你幹你的,我幹個人,互不影響,ok,咱們怎麼拆分?直接把大函數拆分紅小函數,每個小函數負責一個狀態的實現。而後咱們用combineReducers去吧全部的reducer合併起來生成一個大的。

若是是兩個以上的reducer,咱們能夠直接combineReducers({todo1,todo2,todo3}),es6的寫法

好吧,咱們寫好了action和reducer文檔,下面應該寫store了,store的話引入reducer便可

const store = createStore(reducers),export default store這樣就能夠了?固然不是,咱們要看看是否是有第二個參數,第二個參數initialstate是state的初始值,通常狀況只須要將reducer的數據更新拿過來,沒有的話就使用初始值。

那麼好的怎麼將數據拿來?

store提供三種方法,分別是getState(獲取當前state),subscribe(監聽state變化),dispatch(分發action)

那麼咱們如今已經處理好actions,reducers,stores,下面咱們應該寫的是components

component通常寫的是咱們的UI組件,是咱們在view上面能夠看到的東西,好的,那麼咱們如今要在view上面看到的具備變化性質的東西應該怎麼去傳入屬性值呢?
如今就應該用到了connect和Provide了,react-redux裏面的這兩種方法可讓全部的組件成功的使用咱們傳入的state對象,

咱們須要作的就是使用connect讓最外層的組件變成容器組件,而後使用Provider傳入store,讓全部的子組件可使用到state對象

,connect中有四種方法,這邊只說兩種,分別是mapDispatchToProps和mapStateToProps,後者是創建state到props的映射,讓UI組件可使用容器組件中傳入的屬性值

傳入的todos我能夠能夠直接在UI組件內調用,至關於咱們傳入了一個屬性名稱是todos,mapStateToProps還能夠監聽state的變化,能夠理解爲getState和subscribe功能的集合體!

mapDispatchToProps是創建起UI組件的參數到actions的映射(到store.dispatch方法的映射)

基礎的東西都說完了,index.js後續用webpack打包一下就能夠了,今天先說到這吧!0.0

相關文章
相關標籤/搜索