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