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)

Related Query

More Query from same tag