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
Source: stackoverflow.com
Related Query
- How can I get data from a local file into my React app?
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- React testing - How can I mock or inject data in the store to be provided as props to component
- How can i push data into react-admin store?
- How can i use React's fetch to store data into a variable?
- how can I store and access data attributes on elements like select options in React
- How can I push my react form data to a dynamic API query in another component
- How can I filter json data from api call in react into different sections of the component
- How can I render different sets of data into one React component multiple times?
- How can I store the data I get from a Promise back into an object with the same key it came from?
- React js backend how to get the price_data info from stripe.checkout.session.line_items and push the data into firestore
- React Admin - How can I get each selected data of AutocompleteInput in ArrayInput?
- How can I pass my Todo component Data into my Todolist component using React hooks?
- React : How can I store my text file's content into a variable using async->fetch
- How can I pass data using <Redirect> in react router v4?
- How to store data locally in React Native that is not a string
- How can I properly import a Component into my Navigator in React Native?
- how can I show customized error messaged from server side validation in React Admin package?
- How can I pass data from express server to react views?
- How to fetch data and store in React Context API?
- How can mock the value of a state and data in my react test
- How can I split React Router into multiple files
- How can I reuse the API data for all the pages in react js
- How can I cache data from API to Cache Storage in React PWA?
- How can I use react useContext , to show data from context, in the same component
- How to push data from backend to frontend in react
- How to pass server data into React component
- How to get CSV data using Reactjs and store into state?
- Recoding RShiny app into React App - how to get my data to my React App
- REACT JS How can I display my fetched API data from onClick?
More Query from same tag
- Type Problem: How can useState(react-hook) be used as a global variable when contextAPI is used in typescript?
- Convert Application from React 0.13.3 to React 0.14
- Don't close Dialog(Modal) when click outside in React & HeadlessUI
- React - How to add local data to data from a REST api?
- Selective state not updating in React component
- React-Admin custom api call
- Why can't a getElementById method find an element when imported inside functional component?
- What's render props, how is it different from high order components?
- Understanding If condition logic
- Jest collectCoverageFrom and coverageThreshold not working
- Add all the elements in an array without using loops
- What is difference in following two setState
- Getting the id of a clicked element from rendered list
- Why my react app fails on production build after upgrading to react 16?
- How to deploy React application to Heroku
- React-data-table -Adding a CSS class to row dynamically
- How to save response data in a variable or state in js
- React using refs for child components
- How can I display list of items from a text file?
- Select component is ignoring parent onClick event
- TailwindCSS animation not working with dark variant
- Augment types for imported module in TypeScript
- Could not find a production build in the '/opt/app/.next' directory
- Unable to write script tag which includes some code in React Component
- Export variable from componentDidMount
- Array.push() method replacing initial index value instead of appending at end
- How to render an image from an array in React?
- Map through an array of objects in js/react
- Using useState-hook to alter styled-components from within
- Access props in an ES7 decorator