Как я могу отправить данные в хранилище реакции-администратора?

Question

Я пытаюсь создать веб-приложение с response-admin, и мне нужно отправить данные в хранилище данных.Я читаю документы React-admin (https://marmelab.com/react-admin/Actions.html), и когда я пытаюсь это сделать, я получаю Сбои.

Вот мой код

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import {
    Menu,
    Notification,
    Sidebar,
        setSidebarVisibility, 
} from 'react-admin';

import {kidsLoad} from './customActions/KidsActions'

import AppBar from './MyAppBar';
const styles = theme => ({
    root: {
        display: 'flex',
        flexDirection: 'column',
        zIndex: 1,
        minHeight: '100vh',
        backgroundColor: theme.palette.background.default,
        position: 'relative',
    },
    appFrame: {
        display: 'flex',
        flexDirection: 'column',
        overflowX: 'auto',
    },
    contentWithSidebar: {
        display: 'flex',
        flexGrow: 1,
    },
    content: {
        display: 'flex',
        flexDirection: 'column',
        flexGrow: 2,
        padding: theme.spacing.unit * 3,
        marginTop: '1em',
        paddingLeft: 5,
    },
});

class MyLayout extends Component {
    componentWillMount() {
        this.props.setSidebarVisibility(true);
        }

        componentDidMount(){
            const { kidsLoad, record } = this.props;

            kidsLoad({data: "HELLOOOOOOOOOOOO!!!!!"})

        }

    render() {
        const {
            children,
            classes,
            dashboard,
            isLoading,
            logout,
            open,
            title,
        } = this.props;
        return (
            <div className={classes.root}>
                <div className={classes.appFrame}>
                    <AppBar title={title} open={open} logout={logout} />
                    <main className={classes.contentWithSidebar}>

                        <div className={classes.content}>
                            {children}
                        </div>
                    </main>
                    <Notification />
                </div>
            </div>
        );
    }
}

MyLayout.propTypes = {
    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
    dashboard: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.string,
    ]),
    isLoading: PropTypes.bool.isRequired,
    // logout: componentPropType,
    setSidebarVisibility: PropTypes.func.isRequired,
        title: PropTypes.string.isRequired,
        kidsLoad: PropTypes.func,
};

const mapStateToProps = state => ({ isLoading: state.admin.loading > 0 });
export default connect(mapStateToProps, { setSidebarVisibility, kidsLoad })(withStyles(styles)(MyLayout));

Я сделал все как в документации (https://marmelab.com/react-admin/Actions.html).

Что я сделал не так? Как вы добавляете данные в хранилище в этом фреймворке?

Answer 1

Это будет быстрый ответ, который я оставлю для дальнейшего улучшения.

Если я правильно понимаю ваш вопрос, вы обновили некоторые из ваших ресурсов (сущностей) и хотите, чтобы с ним реагировал admin-adminи обновлять его хранилище, соответственно вызывая обновления в представлениях приложений, если это необходимо.

Первое, что мы должны получить, - это функция dispatch хранилища реагирования-администрирования.В моем случае источником обновления ресурса был компонент React, поэтому я использовал withDataProvider decorator для получения ссылки на функцию dispatch.

Как только вы получите dispatch функция, которую вы отправляете, например, CRUD_UPDATE_SUCCESS действие для определенного обновления ресурса в хранилище реагирующих администраторов.

import { CRUD_UPDATE_SUCCESS, FETCH_END, UPDATE } from 'react-admin';

dispatch({
  type: CRUD_UPDATE_SUCCESS,
  payload: { data },
  meta: {
    resource,
    notification: {
      body: 'ra.notification.dataSaved',
      level: 'info'
    },
    fetchResponse: UPDATE,
    fetchStatus: FETCH_END
  }
});

Вы также можете использовать создателей действий из реагирующего администратора.Как, например, showNotification.

import { showNotification } from 'react-admin';

dispatch(showNotification(errorMessage, 'warning', { autoHideDuration: 10000 }));

Немного более последовательный фрагмент кода, чтобы показать, как все это может работать вместе.Компонент Updater здесь визуализирует свои дочерние компоненты, передавая им ресурс record, и подписывается на их onSubmit обратный вызов для выполнения сохранения сущности и обновления хранилища response-admin.

import React from 'react';
import { 
  CRUD_UPDATE_SUCCESS, FETCH_END, UPDATE, withDataProvider, showNotification 
} from 'react-admin';

class Updater extends React.Component {
  constructor(props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleUpdate(record) {
    const { resource, dataProvider, dispatch } = this.props;

    const payload = {
      id: record.id,
    };

    payload.data = {...record};

    return new Promise((resolve, reject) => {
      dataProvider(UPDATE, resource, payload)
        .then(({data}) => {
          dispatch({
            type: CRUD_UPDATE_SUCCESS,
            payload: { data },
            meta: {
              resource,
              notification: {
                body: 'ra.notification.dataSaved',
                level: 'info'
              },
              fetchResponse: UPDATE,
              fetchStatus: FETCH_END
            }
          });

          resolve(data);
        })
        .catch(e => {
          const errorMessage = e.message || e;

          this.setState({ errorMessage });

          dispatch(
            showNotification(errorMessage, 'warning', { autoHideDuration: 10000 })
          );

          reject(errorMessage);
        });
    });
  }

  render() {
    const { record, children } = this.props;
    const { errorMessage } = this.state;

    return React.Children.only(React.cloneElement(children, {
      record,
      errorMessage,
      onUpdate: this.handleUpdate
    }));
  }
}

export default withDataProvider(Updater);

HTH, Ed