connect 组件绑定数据

https://segmentfault.com/a/1190000020288369?utm_source=tag-newest
https://github.com/umijs/umi-example-dva-user-dashboard

connect

mapStateToProps
mapDispatchToProps
https://blog.csdn.net/suwu150/article/details/79415085

hooks connect

import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
function TableList() {}
function mapStateToProps({list, loading}) {
  return {
    list,
    loading: loading.effects['list/getList'] ?? false,
  }
}
function mapDispatchToProps(dispatch) {
  return {
    _$getList: payload => dispatch({ type: 'list/getList', payload }),
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(TableList);

class connect

import React, { PureComponent } from 'react';
import { injectIntl } from 'react-intl';
import { connect } from 'dva';
@connect(
    state => ({list: state.list}),
  dispatch => ({
      _$getList: payload => dispatch({ type: 'list/getList', payload }),
  })
);
@injectIntl;
class TableList extends PureComponent {
  componentDidMount() {}
}

import React, { useEffect, useState } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
function App(props) {
    console.log(props)
  useEffect(init, []);
  function init() {
    dispatch({
      type: 'monitor/init',
      payload: {page: 1, limit: 10 },
    })
  }
  function pageChange(id) {
    dispatch(routerRedux.push({
      pathname: '/users',
      query: { id },
    }));
  }
  return (
    <div>
        <button onClick={() => pageChange(3)}>查看用户详情</button>
    </div>
  )
}
function mapStateToProps(state) {
  const { list, total, page } = state.users;
  return {
    list,
    total,
    page,
    loading: state.loading.models.users,
  };
}
export default connect(mapStateToProps, null)(App);

mapStateToProps

state，是 dvamoel里面的所有命名空间，全局的命名空间；可以结构出想要的命名空间。

function mapStateToProps(state, prevProps) {
}

init

function init() {
  dispatch({
    type: 'monitor/init',
    payload: {page: 1, limit: 10 },
  })
}

models

reducers

import { getData } from '@/services/monitor'
export default {
  namespace: 'monitor',
  state: {
    dataSource: [],
  },
  reducers: {
    save(state, action) {
      console.log(123, action);
      return { ...state, ...(action.payload || {}) };
    },
  },
  effects: {
    *init({ payload }, { call, put }) {
      console.log('init', payload)
      const res = yield call(getData, payload);
      if(!res) return;
      yield put({ type: 'save', payload: res });
    },
  },
}

reducer/save, action的参数