【React dva】dva基礎用法記錄

1.左側Menu 新增 模塊

    { key: '/stock/test', name: '測試React' }

2. 左側Menu 已經出現，增加路由：

  {
    path: '/stock/test',
    component: require('./TestKn'),
  },

3.在路由目錄，新增TestKn.jsx
routs / TestKn.jsx  --萬物之本

import React, { PropTypes } from 'react';
import { connect } from 'dva';
import Search from '../../components/Inventory/TestKn/search';

const TestKn = ({ stockInData, dispatch }) => {
const TestProps={
  testId:5,
  testAlert(value){
    alert("此彈框是源自TestKn："+value);
  }
}
  return (
    <div >
  <Search {...TestProps} />
    </div>
  );
};
TestKn.propTypes = {
  dispatch: PropTypes.func,
};
function mapStateToProps(stockInData) {
  return { stockInData };
}

export default connect(mapStateToProps)(TestKn);

TestProps， 父組件給子組件傳值

4.在components  組件文件夾內的Inventory 新增TestKn文件夾，裏面增加search.jsx

import React, { PropTypes } from 'react';
import { Form, Input, Button, Select, Breadcrumb, DatePicker, Row, Col, Radio } from 'antd';


const search=({
  testId,
  testAlert
})=>{
  return(
    <div>
      <Button onClick={()=>testAlert(testId)}>按此獲取父組件TestKn內的testId值</Button>
    </div>
  );
}
search.propTypes = {
  testId:PropTypes.string,
  testAlert:PropTypes.func,
};
export default Form.create()(search);

此時，點擊測試按鈕，即可彈出父組件給傳 的值。

    =>    此彈框是源自TestKn：5

5. 新增models

在models 文件夾內 新建testKn.js

import { parse } from 'qs';
import { message } from 'antd';

export default {
  namespace: 'testKn',
  state:{
    testId:0,
  },
  subscriptions: {
    setup({ dispatch, history }) {
      history.listen((location) => {
        if (location.pathname === '/stock/test') {
          //初始化testId的值爲10
          dispatch({
            type: 'update',
            payload: { ...location.query, testId: 10 },
          });
        }
      });
    },
  },
  effects: {
    * update({ payload }, { call, put }) {

        yield put({ type: 'showModal', payload });

  },
    },
  reducers: {
    update(state, action) {
      return { ...state, ...action.payload };
    },
      }
}

並註冊此models 在enity的inventory.js中

app.model(require('../models/inventory/testKn'));

6.在search.jsx中新增按鈕：

 

 <Button onClick={()=>testAlertByStore()}>按此獲取store內testId值</Button>

更新 routes.jsx中的TestKn.jsx

import React, { PropTypes } from 'react';
import { connect } from 'dva';
import Search from '../../components/Inventory/TestKn/search';

const TestKn = ({
  dispatch,
  storeInfo,
 }) => {
  console.log(storeInfo);
const TestProps={
  testId:5,
  testAlert(value){
    alert("此彈框是源自TestKn："+value);
  },
  testAlertByStore(){
      alert("此彈框內容是源自Store："+storeInfo.testId);
  }

}
  return (
    <div >
  <Search {...TestProps} />
    </div>
  );
};
TestKn.propTypes = {
  dispatch: PropTypes.func,
};
function mapStateToProps(stockInData) {
  return {
    storeInfo:stockInData.testKn,
  };
}

export default connect(mapStateToProps)(TestKn);

此時，彈框即可彈出sotre中的 10

=> 此彈框內容是源自Store：10

7. 增加按鈕，更改store中值

search.jsx

 <Button onClick={()=>testUpdateStore(20)}>按此更改store內testId值爲20</Button>

TestKn.jsx

  testUpdateStore(value){
    dispatch({
    type: 'testKn/update',
    payload: { testId: value },
  });