I made a small project in which I used react, redux, redux thunk. When the user enters the application, all the actions make asynchronous requests and fill up the reducera data. But when the data from the server changes, I have to send a dispatch action before downloading the component and the data does not change and it slows down . Calling action in the Shouldcomponentupdate is also not an option. It will tell you that the data has changed and the reducer updated itself.

  • Here it is necessary to post - code on the code - Alexander Zaytsev
  • in general, any data change in the store should result in a dispatch action if you are using redux. - Dmitry Kozlov
  • You are right that any change results in the dispatch action and in my application as well, but when the data changes in the server regardless of the application, the application cannot update the reducer. To update the reducer, you must remove the dispatch action before the render component and slow down the application. the main disadvantage is that if I am in another component of the reducer but can update myself - Zhasulan Alen

1 answer 1

Came to this approach, allows you to avoid requests for those branches that are now "not needed" to the user, which he does not see. In addition, after sending the action to download, you have the opportunity to organize a queue of requests to the server and continue to resolve at will. It is also important to perform side effects not in the render or shouldcomponentupdate methods, but in componentDidMount, componentDidUpdate, this guarantees their execution, as described in detail in the documentation.

Component

componentDidMount() { const { needLoadContent } = this.props; if (needLoadContent) this.loadContent(); } componentDidUpdate(prevProps) { const { needLoadContent } = this.props; if (needLoadContent && !prevProps.needLoadContent) { this.loadContent(); } } loadContent = () => { const { contentActions } = this.props; contentActions.contentRequest(); }; const mapStateToProps = state => { return { needLoadContent: needLoadAllContentSelector(state), }; };

Redux

  { data: null, fetching: false, needUpdate: true, errors: ?, },

Selector

 (fetching, needUpdate) => needUpdate && !fetching