Creating a custom action in react-admin I cannot see where to link to my dataprovider

Question

I am following this tutorial to create custom actions in React-admin (former Admin-on-rest): using a custom action creator.

However, after implement it, my code is not doing anything, i.e., the backend is not called.

I guess it is missing in the documentation a way to link the action with the dataProvider, unless the redux is handling it automagically.

Is it right? No need to link to the dataProvider being the opposite from what was made in the fetch example?

Following pieces of my code:

• UpdatePage is pretty similar to ApproveButton in the tutorial:

  // Update Page.js  
  import React, { Component } from 'react';  
  import PropTypes from 'prop-types';  
  import { connect } from 'react-redux';  
  import { updatePage } from '../../actions/pages';  
  import Button from '@material-ui/core/Button';  
  
  class UpdatePage extends Component {  
      handleClick = () => {  
          const { record } = this.props;  
          updatePage(record.id, record);  
      }  
  
      render() {
          return <Button disabled={this.props.disabled} onClick={this.handleClick}>Confirmar</Button>;
      }
  }
  
  UpdatePage.propTypes = {
      disabled: PropTypes.bool.isRequired,
      updatePage: PropTypes.func.isRequired,
      record: PropTypes.object,
  };
  
  export default connect(null, {
      updatePage
  })(UpdatePage);`
  

• Actions for the UpdatePage (like in the commentActions of the tutorial):

  //in ../../actions/pages.js  
  import { UPDATE } from 'react-admin';
  
  export const UPDATE_PAGE = 'UPDATE_PAGE';
  export const updatePage = (id, data) => ({
      type: UPDATE_PAGE,
      payload: { id, data: { ...data, is_updated: true } },
      meta: { fetch: UPDATE, resource: 'pages' },
  });
  

Answer 1

You're invoking the action creator directly in the handleClick method. You need to use the updatePage function inside the props to properly dispatch the redux action.

handleClick = () => {  
    const { record } = this.props;  
    this.props.updatePage(record.id, record);  
}