react dva

react的存储数据dva

1、配置文件

/config.ts
export default defineConfig({
  dva: {
    hmr: true,
  }
});

2、获取dva实例，通过store.dispatch的方式改变数据;

/app.tsx
const store = getDvaApp()._store; // umi 暴露的 getDvaApp 方法获取 dva 实例
store.dispatch({
    //触发reducers 改变值 dva
    type: 'mapdata/setUserName', // namespace/方法名
    payload: { fuserName: '行政测试' }, // 参数
});

3、定义dva数据实体，文件必须放在/models目录下，并且文件的名字需要跟namespace一致。

/models/mapdata.js
export default {
  //dva 使用
  namespace: 'mapdata',
  //数据
  state: {
    fname: 'map',
  },
  //同步修改数据
  reducers: {
    setUserName(state, { payload }) {
      // state是当前状态的值，payload 是调用dispatch时传过来的值
      return {
        ...state,
        fuserName: payload.fuserName, //请求到的数据
      };
    },
  },
};

4、通过connect，将页面dom元素跟数据dva建立关联，通过props获取数据；

/Equipment/index.tst
import {connect } from 'umi';

const Environment: React.FC = (props) => {
  const { mapdata, dispatch } = props;//mapdata是dva数据，dispatch可以
  //console.log('models2', props, mapdata.fuserName);
  const click=()=>{
      dispatch({//dva 用法
        //触发reducers 改变值
        type: 'mapdata/setUserName', // namespace/方法名
        payload: { fuserName: '行政开发' }, // 参数
      });
      console.log('modelsmodels22', mapdata);
  }
      
  }
export default connect(({ mapdata }) => {
  //console.log('models', mapdata);
  return {
    mapdata,
  };
})(Environment);