如何將數據推送到 react-admin 存儲？

Question

我正在嘗試使用 react-admin 構建一個 Web 應用程序，並且需要將數據推送到 redux 存儲。 我閱讀了 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

這將是一個快速的答案，我會留待進一步改進。

如果我正確理解您的問題，您會更新您的一些資源（實體），並且您希望 react-admin 了解它並相應地更新其商店，以便在必要時觸發應用程序視圖中的更新。

我們首先要得到的是 react-admin 存儲的dispatch函數。 在我的例子中，資源更新的源是一個 React 組件，所以我使用withDataProvider裝飾器來接收對dispatch函數的引用。

一旦您擁有dispatch功能，例如，針對 react-admin 存儲中特定資源更新的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
  }
});

您還可以使用 react-admin 中的動作創建器。 例如，像showNotification 。

import { showNotification } from 'react-admin';

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

這里有一段更一致的代碼來展示所有這些是如何協同工作的。 此處的Updater組件呈現其子組件，向它們傳遞資源record並訂閱它們的onSubmit回調以執行實體保存和更新 react-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, 埃德