score:-1
i don't think this is possible in the routes and views. when you switch pages with react router, the component unmounts. all the data of the component is also cleared. (believe me, this is something you want. otherwise you might get some serieus memory issues that let your browser crash). also, your view is only responsible for displaying stuff and should not do things with the data it receives.
take a look for some implementation in your store. for example store the received data from the api in the store object. the next time someone is calling the fetchdata
function in the store, serve the stored data instead of make a new request. the store never unmounts so it can hold data in memory. keep in mind that the user will only receive new data if the reload the entire page. so a 'hard refresh' but might be useful..
another thing you can do is asking yourself why you don't want to call that endpoint multiple times? is the data set to large to receive? in that case use pagination and serve it in pieces.
score:2
change datalistcontainer.js
to be a stateful react component, this is ok because it's the container! don't take the code for exact, it's to just to give an idea.
import { fetchdata, datalist, store } '......'
class datalistcontainer extends react.component {
componentdidmount() {
if (!this.props.data) {
store.dispatch(fetchdata())
}
}
render() {
return (<datalist data={this.props.data}/>);
}
}
const mapstatetoprops = (state) => {
return { data: state.data }
}
export default connect(
mapstatetoprops
)(datalistcontainer)
Source: stackoverflow.com
Related Query
- SetState with react hook and redux after async call to axios API
- React Router, Redux and async API call
- React Redux - Waiting for async api call to finish before next action is dispatched
- react js and redux sending a api call before each route
- Protect routes with React Router v6 and API Call
- How to setState in React when async mapping through array and API call
- Fetching data from async api call using react redux
- How to make react router work with static assets, html5 mode, history API and nested routes?
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- Can I send an AJAX call in React and Redux without action creators and reducers?
- Paginate date-specific results from an API with React and Redux
- React Router + Redux - Dispatch an async action on route change?
- React and Flux: "dispatch in the middle of a dispatch" to show error message from an API call
- Async Image Load with React and Redux
- how and when to call a react component methods after state change from redux
- onEnter Transitions with React Router and Redux Simple Router Dont Render New Route's Component
- How to make the API call and display it in React JS using React Table and Axios?
- Sync queryParameters with Redux state and react router for function components
- How to test React Router params with Redux and enzyme
- How to add login authentication and session to ReactJS React Router and Redux with MongoDB + NodeJS Express?
- How to test state update and component rerender after async call in react
- React Context : Get Data from API and call API whenever some events happens in React Component
- React router v4 with redux protected routes and auth
- React router base code-splitting (get first chunk and then get other chunks async in background)
- React Redux with redux-observable use the router to navigate to a different page after async action complete
- redux react strategy with async data and interaction
- React router + redux navigating back doesn't call componentWillMount
- Combining React router and Firebase function api
- React with Redux and Router - server rendering
- API call after reloading same route via react router
More Query from same tag
- React project in Visual Studio 2017
- Issue with Varnish
- Pros & cons between <MyComp /> and React.createElement(MyComp)
- (react,antd,card) How can I block the onclick function from action buttons with antd card component?
- React Hook "useEffect" is called in function "shoes" which is neither a React function component or a custom React Hook
- Securely storing auth token in React Frontend
- If condition within Array in React JS
- React Material-Ui Sticky Table Header with Dynamic Height
- Observables-hooks How to to subscribe only on click
- Add '<script>' in react component
- Package react does not satisfy its siblings
- React Router v4 Nested Routes with Switch
- getting jquery object after bind(this) in react componentDidMount
- Semantic UI React Menu pointing won't change active state on Route change
- I have to click twice to re-render my updated state and the callback function doesn't work
- Button functionality is not working when clicked for 2nd time in React
- Type react component with changeable wrapper and wrapper props
- React passing data from child -> parent -> another child
- use an array which is defined in another file using react?
- How do I change the style of the inner part enclosed by the lines(polar) chart created with highcharts?
- When does state update in React
- there is lag in my react app on a add to card button
- How to a use bootstrap grid for an array created by a map method in react?
- Convert document.querySelector() into Reactjs
- object-fit:cover resizes img width
- window.enableMouseFlow is undefined in componentDidMount() but available in render()
- Cannot get prevState value using userRef hook for array of objects
- Inline MaterialTable Edit with DropDown
- I am getting an error in my map function returning React component
- Compiling React with Webpack 4.x and Babel 8.x