【问题标题】:react-admin: changing a list from store without http requestsreact-admin:在没有 http 请求的情况下从商店更改列表
【发布时间】:2019-05-17 16:52:53
【问题描述】:

我正在使用react-admin,我需要从一个资源直接控制商店,在我的例子中是orders 资源。

每次我运行GET_LIST它都会从商店的列表中附加新记录,但是,我想从服务器获取一个新列表并丢弃旧列表。这是我检索记录的地方:

    dataProvider(GET_LIST, 'orders', {
        filter: { updatedAt: filterDate }, // Get date from Filter.
        sort: { field: 'updatedAt', order: 'DESC' },
        pagination: { page: 1, perPage: 999 },
    }).then(response => response.data)

所以,我决定直接操作商店,经过一番挖掘,我看到了这个 answer 和源代码:

const dataReducer: Reducer<RecordSetWithDate> = (
    previousState = initialState,
    { payload, meta }
) => {
    if (meta && meta.optimistic) {
        if (meta.fetch === UPDATE) {
            const updatedRecord = {
                ...previousState[payload.id],
                ...payload.data,
            };
            return addRecords([updatedRecord], previousState);
        }
        if (meta.fetch === UPDATE_MANY) {
            const updatedRecords = payload.ids.map(id => ({
                ...previousState[id],
                ...payload.data,
            }));
            return addRecords(updatedRecords, previousState);
        }
        if (meta.fetch === DELETE) {
            return removeRecords([payload.id], previousState);
        }
        if (meta.fetch === DELETE_MANY) {
            return removeRecords(payload.ids, previousState);
        }
    }
    if (!meta || !meta.fetchResponse || meta.fetchStatus !== FETCH_END) {
        return previousState;
    }

    switch (meta.fetchResponse) {
        case GET_LIST:
        case GET_MANY:
        case GET_MANY_REFERENCE:
            return addRecords(payload.data, previousState);
        case GET_ONE:
        case UPDATE:
        case CREATE:
            return addRecords([payload.data], previousState);
        default:
            return previousState;
    }
};

因此,基于此,我创建了一个自定义操作来从列表中删除旧 ID,并添加从数据源检索到的新 ID:

   import {GET_LIST, DELETE_MANY, FETCH_END } from 'react-admin';
    export const UPDATE_ORDER_ADMIN = 'UPDATE_ORDER_ADMIN';
    export const update_orders_admin = (data, oldIDS) => ({
        type: UPDATE_ORDER_ADMIN,
        payload: { data, ids: oldIDS },
        meta: {
            resource: 'orders',
            optimistic: true,
            fetch: DELETE_MANY,
            fetchResponse: GET_LIST,
            fetchStatus: FETCH_END,
        },
    });

我在从后端检索数据后使用此自定义操作:

   dataProvider(GET_LIST, 'orders', {
        filter: { updatedAt: filterDate }, // Get date from Filter.
        sort: { field: 'updatedAt', order: 'DESC' },
        pagination: { page: 1, perPage: 999 },
    }).then(response => response.data)
        .then(data => {
            const ids = orders ? Object.keys(orders) : [];
            update_orders_admin(data, ids);
            this.setState({ isLoading: false })
            return null;
        });

但是,系统正在从后端调用 DELETE 操作,试图从数据库中删除记录,而我只想从我的视图中删除这些记录。

有什么想法吗?

【问题讨论】:

    标签: reactjs redux react-redux react-admin admin-on-rest


    【解决方案1】:

    在您的自定义操作中,您将 fetch 设置为 DELETE_MANY,这将对执行 DELETE 操作的每个 id 执行循环。不确定您的实施是否可行,但当前的错误就是这样。您可以尝试删除 fetch ans 看看会发生什么,但我认为没有它他将不会获取记录。如果我没记错的话 RA 只会向数据添加新的 id,但是如果同时更改了数据,我认为它不会替换更改的数据,因为您需要重新实现数据提供程序以更改类似的更新数据行为你正在尝试什么。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-11-02
      • 2011-12-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-11-19
      • 1970-01-01
      相关资源
      最近更新 更多