Как перенести поток данных в Dashboard, чтобы иметь возможность создавать диаграммы на нем в реагирующем админе?

Question

У меня есть базовый dashboard.js, который был в Tutorial of React-admin.

import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import CardHeader from '@material-ui/core/CardHeader';

export default () => (
    <Card>
        <CardHeader title="Welcome to the administration" />
        <CardContent>Juhejj ez is mukodik!</CardContent>
    </Card>
);

Где я могу найти любую документацию о том, как протолкнуть данные, поступающие из моего App.js (из моего Rest API) на панель инструментов?

Я хочу создавать виджеты, диаграммы на своей панели администратора, но все, что я нашел, было создание простой панели инструментов с поддельными данными в dashboard.js.

const data = [{ bla: 1, bla2: 2 }];

Мой App.js выглядит так:

import React from 'react';
import { Admin, Resource, mergeTranslations, ListGuesser } from 'react-admin';
import { AdList } from './ads/AdsList';
import { AdEdit } from './ads/AdsEdit';
import { PostCreate } from './ads/posts';
import { LeadList } from './leads/leads';
import { UserList, UserShow, UserEdit, UserCreate } from './users/users';
import { ClickList, ClickMonthly, ClicksmonthlyList } from './clicks/clicks';
import PostIcon from '@material-ui/icons/Book';
import UserIcon from '@material-ui/icons/Group';
import Dashboard from './dashboard/Dashboard';
import authProvider from './authprovider/authProvider';
import jsonServerProvider from './dataprovider/rest';
import { reducer as tree } from 'ra-tree-ui-materialui';
import englishMessages from 'ra-language-english';
import treeEnglishMessages from 'ra-tree-language-english';

const messages = {
    'en': mergeTranslations(englishMessages, treeEnglishMessages),
};

const dataProvider = jsonServerProvider('http://my.api.to/api/v1/');
const App = () => (
    <Admin dashboard={Dashboard} authProvider={authProvider} dataProvider={dataProvider} locale="en" messages={messages} customReducers={{ tree }}>
    {permissions => [
        <Resource name="ads" options={{ label: 'Hirdetések' }} list={AdList} edit={AdEdit} create={PostCreate} icon={PostIcon}/>,
        permissions === 'admin' ? <Resource name="users" options={{ label: 'Felhasználók' }} list={UserList} show={UserShow} edit={UserEdit} create={UserCreate} icon={UserIcon}/> : null,
        <Resource name="clicks" options={{ label: 'Legutóbbi kattintások' }} list={ClickList} />,
        <Resource name="clicksmonthly" options={{ label: 'Havi összesítés' }} list={ClicksmonthlyList} />,
        <Resource name="leads" options={{ label: 'Legutóbbi leadek' }} list={LeadList} />,
        <Resource name="sites" />

]}
    </Admin>
);

export default App;

Answer 1

Есть два способа сделать это:

Один делает это, как в нашем официальном demo ( source ), где мы вызываем dataProvider напрямуюбез использования приставки.Вы называете это так, как если бы это было для классической выборки (возможно, внутри вашего componentDidMount).Что-то вроде:

dataProvider(GET_LIST, 'commands', {
    filter: { date_gte: aMonthAgo.toISOString() },
    sort: { field: 'date', order: 'DESC' },
    pagination: { page: 1, perPage: 50 },
})
    .then(response => {
        this.setState({ commands: response.data });
    });

Недостатком этого подхода является то, что вам придется самостоятельно обрабатывать ошибки, уведомления и т. Д.

Другим способом будет реакция на adminСоздатели редукционных действий делают то же самое, но используют обработку побочных эффектов (уведомления об ошибках и т. д.).На этот раз вы должны сделать свой <Dashboard> подключенным компонентом:

import { connect } from 'react-redux';
import { crudGetList } from 'react-admin';

const mapStateToProps = state => {
    const commandState = state.admin.commands;

    // Is an object where keys are the commands identifiers
    // and the values are the command
    const commandsByIds = commandState.data;

    return {
        commands: Object.values(commandsByIds),
    }
}

const mapDispatchToProps = {
    crudGetList,
}

const ConnectedDashboard = connect(mapStateToProps, mapDispatchToProps)(Dashboard);

Затем вам нужно будет также позвонить на crudGetList в вашем componentDidMount:

componentDidMount() {
    this.props.crudGetList(
        'commands', // resource name
        { page: 1, perPage: 50 }, // pagination
        { field: 'date', order: 'DESC' }, // sorting
        { date_gte: aMonthAgo.toISOString() } // filters
    );
}

Заключительные замечания:

Мы знаем, что документация может быть улучшена для этих случаев использования.Хорошей новостью является то, что мы скоро сделаем это проще (вероятно, в выпуске 2.8): см. https://github.com/marmelab/react-admin/pull/2899