天天看點

#yyds幹貨盤點# 【React工作記錄四十九】dva的簡單使用流程

前言

我是歌謠 我有個兄弟 巅峰的時候排名c站總榜19 叫前端小歌謠 曾經我花了三年的時間創作了他 現在我要用五年的時間超越他 今天又是接近兄弟的一天人生難免坎坷 大不了從頭再來 歌謠的意志是永恒的 放棄很容易 但是堅持一定很酷

導語

歌謠 歌謠 我最經學習了一個新的知識 dva.js該怎麼使用呢
#yyds幹貨盤點# 【React工作記錄四十九】dva的簡單使用流程
#yyds幹貨盤點# 【React工作記錄四十九】dva的簡單使用流程

第一步 建立一個簡單的頁面

import React, { Component } from 'react';

class geyao extends component
{
    xxxxxxxx 此處省略
}      
#yyds幹貨盤點# 【React工作記錄四十九】dva的簡單使用流程

第二步 建立一個models檔案 下面建立一個js檔案

export default {
  namespace: 'products',
  state: [],
  reducers: {
    'delete'(state, { payload: id }) {
     
    },
  },
};      
#yyds幹貨盤點# 【React工作記錄四十九】dva的簡單使用流程

namespace是唯一名字

reducers定義異步方法 放接口方法

第三步 連接配接

import { connect } from 'dva';
@connect(({ products, menu, loading }) => ({
  menu,
  products,
}))      
#yyds幹貨盤點# 【React工作記錄四十九】dva的簡單使用流程

第四步 調用接口

componentWillMount() {
    this.getAssistList();
  }
  getAssistList() {
    const { dispatch } = this.props;
    dispatch({
      type: 'product/getAssistActivityPage',
    });
  }      
#yyds幹貨盤點# 【React工作記錄四十九】dva的簡單使用流程

總結

繼續閱讀