この記事では、 Dva の Redux 部分であるModel の定義について話しましょう
。新しく作成した Dva プロジェクトを開き、Model 部分である src の下のモデルを確認します。ここでは、彼がケースを示しました
。より多くのモジュールを管理するには、-redux を使用します。乱雑で面倒に見えます
が、これらすべてをモデルにまとめていることがわかり、
そのようなファイルを作成するだけで済みます。
このモデルの下に独自の 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;
}
ここでは、名前に相当する名前空間を記述する必要があります。その後、状態がデータになります。redux をマスターしている人には理解しやすいと思います。リデューサーは、データ操作の関数で記述されています。ここでは
、
使用される配列にデータを追加する updatelist。deepCopy は、
ディープ コピーを行うために使用するコピー状態です
。redux では、開発者が状態を直接操作することは推奨されないため、最初にコピーしてから処理し、返します。それは戻ってきます
次に、srcの下にあるindex.jsを確認し、Model部分にコメントされているコードを紐解く
と、今回の例が導入されていることが分かりますので、
参照先のファイルを記述方法に従って直接、独自のproduct.jsに変更し
、それでは、このデータを操作してみましょう
次のようにコードを記述するコンポーネントを見つけます。
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を導入し、関数名を宣言します。ちなみに私はこれを直接mapStateToPropsと呼んでいます。パラメータstateを受け取り、state.productに等しいproductListを定義します。次の点は、のproductに対応します
。あなたの Model
なので、それに対応します。モデルが与えられ
、 connect を呼び出します。最初のパラメータはモデルを取得する関数で、2 番目のパラメータはコンポーネントのエンティティです。
この時点で、ボタンをクリックして、それを取得して、 this.props.productList のコンテンツを見てください。
これが製品の状態のデータであることがわかります
。それでは、ここでデータを読み取ります。まだ updatelist を呼び出して
、ボタンを追加する必要があります。
<button onClick={
this.addProduct} type="primary">添加</button>
addProductメソッドの参照コードは次のとおりです。
addProduct = () => {
this.props.dispatch({
type: "product/updatelist",
payload: {
name: "新数据"
}
})
}
ここでは this.props.dispatch と呼びます。 type はネームスペース名/メソッド名です。
2 番目のパラメータはメソッドが受け取るアクションです。
コードを実行し
、最初にクリックして追加し、クリックして取得します。
