"React DVA" DVA basic usage record

1. Left Menu new module

    {key: '/stock/test ', Name: ' Test react '}

2. The left menu already appears, increasing the route:

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

3. In the routing directory, add testkn.jsx
ROUTS/TESTKN.JSX--The Book of all Things

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 ( "This box is from TESTKN:" +value);}
}
  Return (
    <div >
  <search {... Testprops}/>
    </div>
  );
};
Testkn.proptypes = {
  dispatch:PropTypes.func,
};
function Mapstatetoprops (stockindata) {
  return {stockindata};
}

Export default Connect (mapstatetoprops) (TESTKN);

Testprops, the parent component passes a value to the subassembly

4. Add Testkn folder to inventory within the Components folder, adding 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)}> Click to get TestID values in parent component testkn </Button>
    </div>
  );
}
Search.proptypes = {
  testId:PropTypes.string,
  testAlert:PropTypes.func,
};
Export default Form.create () (search);

At this point, click the Test button to eject the parent component to pass the value.

= = This frame is from Testkn:5

5. New Models

Create a new testkn.js within the Models folder

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 ') {
          // The value of the initialization TestID is
          dispatch ({
            type: ' Update ',
            payload: {... location.query, testid:10},
          });
        } }),},
  and
  effects: {
    * update ({payload}, {call, put}) {

        yield put ({type: ' ShowModal ', Payload});},
  reducers: {
    update (State, action) {
      return {... action.payload};
    },
      }
}

and register this models in the inventory.js of enity

App.model (Require ('.. /models/inventory/testkn '));

6. New button in SEARCH.JSX:

<button onclick={() =>testalertbystore ()}> Click here for TestID value in store </Button>

Update TESTKN.JSX in ROUTES.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 ("This box is from TESTKN:" +value);
  },
  Testalertbystore () {
      alert ("This bullet box content is from 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);

At this point, the box pops up 10 in the sotre.

= = This frame content is derived from store:10

7. Add a button to change the value in store

Search.jsx

<button onclick={() =>testupdatestore}> Click to change TestID value in store

Testkn.jsx

  Testupdatestore (value) {
    dispatch ({
    type: ' Testkn/update ',
    payload: {testid:value},
  });