本文的話 我們講一下定義Model
也就是Dva中redux的部分
我們打開一個剛創(chuàng)建的Dva項目 看到 src下的models 下 就是Model部分 這里 他給我們了一個案例
如果用 react-redux 管理 模塊多了之后會看著比較亂 或 很麻煩
但是 大家會發(fā)現(xiàn) 在Model中 他將這些都放在一起了
只需要創(chuàng)建一個這樣的文件就可以了
我們在這個models下創(chuàng)建一個自己的 就叫 product.js
然后編寫代碼如下
export default {
namespace: "product",
state: {
productList: [
{
name: "小貓貓"
},
{
name: "小狗狗"
}
]
},
reducers: {
updatelist(state,action) {
let stateClon = deepCopy(state);
stateClon.productList.push(action.payload);
return stateClon;
}
}
}
function deepCopy(obj) {
let str = JSON.stringify(obj);
let appobj = JSON.parse(str);
return appobj;
}
這里 namespace是一定要寫的 相當(dāng)于名字 然后 state就是我們的數(shù)據(jù)了 對掌握redux的伙伴比較好理解
reducers中寫的是我們操作數(shù)據(jù)的函數(shù) 這里 我們寫了一個向數(shù)組中加數(shù)據(jù)的updatelist
其中用到了一個deepCopy
這個是我們用來做深拷貝的 拷貝state
因為redux寫明不建議開發(fā)者直接操作state 所以 我們先拷貝出來 然后處理好 在return回去
然后 我們看到 src下的index.js 將Model部分注釋的代碼解開
就可以看到 它引入的是我們example的例子
我們直接按他這個寫法 將引用的文件改成我們自己寫的product.js
然后 我們來試著操作這個數(shù)據(jù)
我們找一個組件編寫代碼如下
import React from "react"
import { connect } from "dva";
class dom extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
getProduct = () =>{
console.log(this.props.productList);
}
render(){
return (
<div>
<button onClick={this.getProduct} type="primary">獲取</button>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
productList: state.product
}
}
export default connect(mapStateToProps)(dom);
首先 你要引入connect 然后聲明一個函數(shù) 名字順便 我這里直接叫 mapStateToProps 他接收一個參數(shù)state 然后定義 productList 等于 state.product
這個 state 后面點的等下就要和你Model中的product對應(yīng)
這樣 他就會將對應(yīng)的Model給你
然后調(diào)用connect 第一個參數(shù)是獲取Model的函數(shù) 第二個是組件的實體
此時 我們點擊按鈕獲取 來看一下this.props.productList中的內(nèi)容
可以看到 這就是我們product state的數(shù)據(jù)了
那么 這里 讀到數(shù)據(jù)了 我們還是要來調(diào)用updatelist
我們加一個按鈕
<button onClick={this.addProduct} type="primary">添加</button>
addProduct方法參考代碼如下
addProduct = () => {
this.props.dispatch({
type: "product/updatelist",
payload: {
name: "新數(shù)據(jù)"
}
})
}
這里 我們調(diào)用this.props.dispatch type 就是 namespace名/方法名
第二個參數(shù) 就是方法接收到的action文章來源：http://www.zghlxwxcb.cn/news/detail-554584.html
運行代碼
然后 我們先點擊添加 在點擊獲取
文章來源地址http://www.zghlxwxcb.cn/news/detail-554584.html
到了這里，關(guān)于React Dva項目創(chuàng)建Model,并演示數(shù)據(jù)管理與函數(shù)調(diào)用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
