【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 },
  });