react redux基礎用法

在學react的是，發現一旦我們封裝好了我們的元件，那麼我們的專案就跟搭積木一樣簡單快速，可是我們發現了乙個問題，在乙個頁面往往會巢狀很多的元件，子元件必須要通過父元件傳遞引數才能渲染出資料，我們回想一下我們之前構建過的所有react應用，資料都是由最頂層父元件（頁面元件）一層層向下傳遞的。

這也是深層次的元件之間通訊困難的原因：資料的傳遞是單向的，子元件的資料只能就近獲取，但是真正的資料來源卻離得太遠，沒有捷徑可以直接通知資料來源更新狀態。

redux的出現改變了react的這種窘迫處境，它提供了整個應用的唯一資料來源store，這個資料來源是隨處可以訪問的，不需要靠父子相傳，並且還提供了（間接）更新這個資料來源的方法，並且是隨處可使用的！

那麼redux是如何工作的呢？這裡我借用阮一峰react講解redux的圖來說明：

使用者看到的是能是我們的頁面，那麼使用者如何跟我們的資料互動呢。首先初始化頁面，我們會渲染store裡面的初始資料，

store 是redux提供的唯一資料來源，它儲存了整個應用的state，並且提供了獲取state的方法，即store.getstate()。

現在使用者點選了某個按鈕，那麼這個時候使用者就觸發了乙個動作，稱之為action，action只是記錄了你剛才"做了什麼動作"，但是就是知道你幹了這個事情，至於事情會發生什麼作用，這個並不是你說的算的，就要引入我們的reducer了，如果說action就是你平常做的事，那麼reducer就是國家的法律，根據你的事法律會給你相應的後果。

1.我們先看action

action是乙個物件，記錄本次事件的型別，以便對應相應的結果，除了type屬性的其他屬性我們稱之為載荷（payload），除了type屬性外，其他屬性都是非必選的。

接下來我們要觸發這個事件

2.在redux中觸發這個事件的方式就是：

dispatch()

3.到這裡我們觸發了事件，那麼事件會產生啥效果呢，這裡就提到我們的reducer

假設我們現在有乙個列表元件，那麼它的資料格式應該可以如下：

//
store.getstate()
}

現在我們做了步驟2的action操作，那麼reducer應該是這樣的：

function
reducer(state, action)  
}default
:    
return state  //
沒有匹配的action type，返回原來的state
}}

到此為止我們知道這個操作會產生的效果就是原來的陣列products從 ['name','age','haha','gege'] 變成了 [1,2,3,4]。

4.拆分reducer

我們在react真實的專案肯定包含許多的元件，不能把所有元件的reducer寫在乙個函式裡面，這樣會顯得更複雜以及檔案特別大，所以我們把上面的reducer改寫一下

function
listreducer(state, action) 
default
:    
return state  //
沒有匹配的action type，返回原來的state}}
function
reducer(state, action) 
}

可以看出達到的效果是一致的，剛好redux為reducer的合併提供了乙個簡單的方法combinereducers,

function
list(state, action) 
default
:    
return state  //
沒有匹配的action type，返回原來的state}}
function
dialog(state, action) 
case 'close_dialog':
return
default
:    
return state  //
沒有匹配的action type，返回原來的state}}
export 
default
combinereducers()

import react,  from 'react'import reactdom from 'react-dom'
//引入redux
//引入reducer
import * as reducers from './redux/reducer.js'import  from 'redux'
//引入元件
import index from './component/index.js'
//把多個元件的reducer合成總的reducer
const reducer =combinereducers(reducers)
//建立store，這個是整個應用唯一的
const store =createstore(reducer)
reactdom.render(
,    document.getelementbyid('root')
)

然後看看我們的index元件是個啥樣子：

import react,  from 'react'import  from 'react-redux'import list from './list.js'class index extends component 
render () 
}function
mapstatetoprops(state) 
export 
default connect(mapstatetoprops)(index)//
關聯到store上

下面最重要的看看list元件：

import react,  from 'react'import proptypes from 'prop-types'import  from 'react-redux'class list extends component 
render() 
})        
return
(            
this.props.change}>改變陣列
)    }
}function
mapstatetoprops(state) 
}function
mapdispatchtoprops(dispatch) )}})
}}}export 
default connect(mapstatetoprops,mapdispatchtoprops)(list)

這裡只是簡單介紹了redux基本知識，但是在實際的專案中如何應用呢，實際的專案react和redux結合如何搭建框架呢，這個下篇文章將會列出乙個真實的專案。

react redux基礎用法

紀錄一下react redux的用法

react redux使用小結

react redux使用小結

react redux基礎用法

紀錄一下react redux的用法

react redux使用小結

react redux使用小結

相關推薦