score:4

This is going to be a quick answer that I leave for further improvement.

If I understand your question correctly you got some of your resources (entities) updated and you want react-admin to know about it and update its store accordingly triggering updates in app views if necessary.

The first thing we have to get is the dispatch function of the react-admin store. In my case, the source of resource update was a React component, so I used withDataProvider decorator to receive a reference to the dispatch function.

Once you have the dispatch function you dispatch, for example, CRUD_UPDATE_SUCCESS action for a particular resource update in the react-admin store.

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
  }
});

You can also use action creators from react-admin. Like showNotification, for example.

import { showNotification } from 'react-admin';

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

A bit more consistent piece of code here to show how all this can work together. The Updater component here renders its child components passing them a resource record and subscribes for their onSubmit callback to perform entity saving and updating react-admin store.

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


Related Query

More Query from same tag