1. 先创建models 里面是存储的状态和操作状态的方法

models 文件

export default{

  namespace: 'product',

  state:{

​    productList: [{

​      name:"牛逼"

​    },{

​      name:"卢本伟"

​    }],

  },

  reducers:{

​    upData(state, action){

​      let currentProductList = deepClone(state)

​      // 深拷贝

​      currentProductList.productList.push( action.paylod)

​      return currentProductList    //返回一个新的state对象

​    }

  }

}

//克隆方法
function deepClone(arr){

  let _obj = JSON.stringify(arr)

  let objClone = JSON.parse(_obj)

  return objClone

}

2. 在 index.js 中引入 modelsapp.model(require(’./models/product’).default);

3.在页面中使用connect 连接容器组件 （ 操作redux的 model ）

import React from "react";

import { connect, useDispatch } from "dva";



const ProdePage = (props) => {

  const current = { name: 123 }



  return <div>

​    <button onClick={() => {

​        props.dispatch({

​          type: "product/upData", paylod: current

​        })

​      }}>我是按钮</button>

  </div>

}



import React from "react";

import { connect, useDispatch } from "dva";



const mapStateProps = (state) => {

  console.log(state, "redux里的状态") //映射状态到页面组件中 通过props 拿到state 和 方法

  return {        //将状态作为返回值传入到页面组件中 state是所有models的状态文件

​    productLists: state.example

  }

}

// 第一个参数存放page

export default connect(mapStateProps)(ProdePage)

类式组件

class ProdePage extends *React*.Component {

  render() {

​    const current = { name: "我是天王" }



​    return <div>

​      <button onClick={() => {

​        this.props.dispatch({

​          type: "product/upData", paylod: current

​        })

​      }}>我是按钮</button>

​    </div>

  }

}



const mapStateProps = (*state*) => {

  console.log(*state*, "redux里的状态") //映射状态到页面组件中 通过props 拿到state 和 方法

  return {        //将状态作为返回值传入到页面组件中 state是所有models的状态文件

​    productLists: state.example

  }

}

// 第一个参数存放page

export default connect(mapStateProps)(ProdePage)