react(3) react dva框架 点击修改state的值 类似react中的this.state和this.setState()

先展示下

点击改变前state的值

点击改变后state的值的变化

首先创建者两个文件

routes目录下的DvaState.js

import React from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';

let count  = 0
const DvaState = ({
      dispatch,
      dvaState,
      }) => {
  const {dataList} = dvaState
  console.log(dataList)
  console.log(dvaState)

  const handleChangeState = () => {
    dispatch({
      type:'dvaState/changeState',
      payload:{
        dataList:[
          {
            list1: count++,
            list2: 'list22',
            list3: 'list33'
          },
          {
            list2:'111'
          }
        ]
      }
    })
  }
  return (
    <div>
      <h2>dvaState</h2>
      <h2>{dataList[0].list1}</h2>
      <button onClick={handleChangeState}>改变state</button>
    </div>
  );
};


export default connect(({ dvaState }) => ({
  dvaState
}))(DvaState);

models 目录下的 dvaState.js

export default {

  namespace: 'dvaState',

  state: {
    dataList:[
      {
        list1:'a',
        list2:'c',
      }
    ]
},

  subscriptions: {
    setup({ dispatch, history }) {

    },
  },

  effects: {

  },

  reducers: {
    changeState(state, {payload}) {
      return {...state, ...payload}
    }
  },

};