react dav

dva part

官网说法：dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。
dva由以下部分组成：

1）定义model

import { concernDelete } from '@/services/api';//接口
export default {
  namespace: 'list', //命名空间， 表示在全局 state 上的 key
  state: {
    data: [],
  },
//这块是redux-saga框架的属性
  effects: {
    *remove({ payload }, { call, put }) {
       //concernDelete接口api
      const response = yield call(concernDelete, payload)
      // put函数是用来发送action的
      yield put({
        type: 'delete',
        payload: payload,
      });
    },
  },

//reducers 等同于 redux 里的 reducer，接收 action，同步更新 state
  reducers: {
    // 不符合redux理念，有空要改过来
    delete(state, { payload }) {
      const idx = state.concerns.findIndex(item => item.id == payload.id);
      state.concerns.splice(idx, 1);
      return state;
    },
  },
};

注：

effect：
相当于redux框架中的dispatch函数，当put一个action后，reducer中就会计算新的state并返回，注意： put.resolve也是阻塞 effect。

call(fn, …args)：
相当于可以调用其他函数的函数，它命令 middleware 来调用fn 函数， args为函数的参数，注意： fn 函数可以是一个 Generator 函数，也可以是一个返回 Promise 的普通函数，call 函数也是阻塞 effect。**

2）编写 UI Component

const columns = [
      {
        title: '姓名',
        dataIndex: 'title',
        render: (...text) => <List.Item>{text[1].name}</List.Item>,
      },
      {
        title: '管理',
        dataIndex: 'manage',
        render: (...text) => {
          const editAndDelete = (key, rowKey) => {
            if (key === 'edit') this.showEditModal(rowKey);
            else if (key === 'delete') {
              Modal.confirm({
                title: '删除关心的人',
                content: '确定删除关心的人吗？',
                okText: '确认',
                cancelText: '取消',
                onOk: () => this.deleteItem(text[1].id, text[1].isMainPerson),
              });
            }
          };
          return (
            <List.Item
              actions={[
                <a
                  data-key="edit"
                  onClick={e => {
                    e.preventDefault();
                    this.showEditModal(text[1], { edit: 'edit' });
                  }}
                >
                  编辑
                </a>,
                <a
                  data-key="delete"
                  onClick={e => {
                    e.preventDefault();
                    const {
                      parentNode: {
                        parentNode: {
                          parentNode: {
                            parentNode: {
                              parentNode: {
                                dataset: { rowKey },
                              },
                            },
                          },
                        },
                      },
                    } = e.target;
                    editAndDelete(e.target.dataset.key, rowKey);
                  }}
                >
                  删除
                </a>,
              ]}
            />
          );
        },
      },
    ];

3）connect 起来

@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))

class BasicList extends PureComponent {
  state = {
    selectedRows: [],
  };
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'list/fetch',
      payload: { isDeleted: 0 },
      //如果model层effects有传入callback传参，并将response回调的话，这里就可以拿到callbak
      // callback(res){
      //   console.log(res)
      // }
    });
  }

参考：https://www.jianshu.com/p/7bf60b913865