redux學習筆記

redux是數據管理框架,使用它主要是由於react組件化以後，組件間值的傳遞比較麻煩，因而使用一個頂層的組件來儲存和分發；這樣就不用傳來傳去了；可是react用起來不太方便；因而有了react-redux，使用provide和connect鏈接起來就能夠mapStateToprops來接收參數和改參數；原來action只能是對象,redux-thunk 是一箇中間件，使用了它就能夠派發函數了； 雖然不少新的東西，前端突飛猛進，好比又出了hooks,vue2纔剛瞭解，vue3就有消息了；因此有人抱怨學不動了,其實都是爲了更方便的需求；

詳細：

Flux 官方推出的原始輔助數據層框架，用於管理react的數據，由於react 組件傳遞值要一層層傳，很麻煩，因此就專門給了個管理層，放在頂層，均可以穿給其它組件； 升級的了是Redux：Redux=reducer+Flux

原理：

Components：借書的人 Action creatotrs：要借什麼書這句話 Store:圖書館管理員 Reducers:記錄本

流程： 首先須要一個store,頁面從store 中取數據； 若是頁面想改變store中的數據，須要派發action給store; store把action 和以前的數據一塊兒給redux,redux結合以前的數據； 返回新的數據給store,store更新本身的數據，再告訴頁面；頁面聯動；

View 派發action,action 經過dispatch派發給store,store連同以前的state一塊兒傳給reducer;reducer返回新的數據給store，store改變state

中間件： redux-thunk ：之前action能夠 函數，原來只能是對象；

下面分別是Redux和React-redux用法：

1、redux

//先建立store //建立reducer,傳給store

加入調試工具同時：github.com/zalmoxisus/…

//函數，返回默認state,並設定初始值,並讓state是初始的defaultState

在這裏插入圖片描述 記得dispatch!!! store.dispatch(action)

this.state.currentpage

以前拿數據要這樣拿： 引入就可使用：

2、react-redux

可是有了react-redux以後，能夠方便點，直接使用provide和connect；就能夠用mapStateToprops和mapDispathToProps，方便操做了；

store和reducer同樣：

在APP.js ，組件外層加一個Provider

1.須要使用Provider，讓組件可使用store，stote提供給內部組件； 2.須要connect 鏈接store和組件

鏈接而且提供兩個方法

import {connect} from 'react-redux';
export default connect(mapStateToProps,mapDispathToProps)(WrappedWebserver) /
複製代碼

兩個方法： mapStateToprops：把store中的store數據給組件props; mapDispatchToProps:調用dispatch 改變state中的數據

這裏直接綁定一個事件changeInputValue，而後直接建立一個action,而後dispatch給了reducer，

reducer判斷action type，而後把獲取到數據，新建立一個數據返回給store

拿數據請記得使用 this.props！！！而不是this.state

包括函數：

<Button onClick={()=>this.props.ResultClick(record)} type="primary">
複製代碼