My practice of fetching data for List/Detail components in React/Redux

The user experience it should have

• When you go to a detail page from the list page or with a direct URL, the detail page should show the up-to-date data
• When you go to the list page with a direct URL, the list page should show the up-to-date data
• When you RETURN to the list page from a detail page, the list page doesn’t have to show the up-to-date data.
• When you RETURN to the list page from a editing page after MAKING CHANGES, the list page should show the up-to-date data to reflect the changes

Solution

• On the list page
  • When entering the component, only fetch the data if the current data (this.props.listData) is null
  • When leaving the component, don’t clear the data fetched from Redux store. They will be needed when returned from detail pages
• On a detail page
  • When entering the component, always fetch the data from the backend
  • When leaving the component, always clear the data locally from the redux store, otherwise the data of this item may be shown when you visit the detail page of another item. That’s because data fetching is called after render() .
  • When returning to the list page from here without any change, do nothing about the list in the redux store. And the link of returning should be an SPA link, which doesn’t force a new document creation
  • After data changing, dispatch an action to refresh the list data in the redux store. So when you go back to the list page, the data has been changed to reflect the changes

Code implementation

//List
class ListComponentContainer extends React.Component {
    componentDidMount() {
        if (this.props.itemList == null) {  
            this.props.dispatch(getItemsAsyncAction(this.props.token));
        }
    }

    render() {
        if (this.props.itemList) {
            return <ListComponent {...this.props}>;
        } else {
            return null;
        }
    }
}

//Detail
class ItemEditComponentContainer extends React.Component {
    componentDidMount() {
       dispatch(getCurrentItemAsyncAction(itemId));
    }

    componentWillUnmount() {
        dispatch(clearCurrentItemLocallyAction());
    }

    render() {
            if (this.props.currentItem) {
                return <ItemEditComponent  currentitem={this.props.currentItem}/>;
            } else {
                return null;
            }
    }
}

//and in the method of handling changes
    onSubmit() {
        dispatch(updateItemAsyncAction());
        dispatch(clearItemListLocallyAction());  //1.  getItemsAsyncAction() will also work.  2. This can also be put in the success callback of updateItemAsyncAction()
    }