【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 (
    

  
    
  );
};
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(
    

      testAlert(testId)}> TestKn testId 
    
  );
}
search.propTypes = {
  testId:PropTypes.string,
  testAlert:PropTypes.func,
};
export default Form.create()(search);

このとき、テストボタンをクリックすると、親コンポーネントから送信された値がポップアップされます.
=>この弾枠はTestKn:5に由来する
5.モデルの追加
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 };
    },
      }
}

このモデルをenityのinventoryに登録します.js中

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

6.search.jsxの新しいボタン:
 

 testAlertByStore()}> store testId 

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 (
    

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

 testUpdateStore(20)}> store testId 20

TestKn.jsx

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