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