Performance Aurelia + Redux

I use Aurelia on a daily basis. Recently, I have been studying using Redux (i.e., I created some small trial applications using Aurelia + Redux) and was really impressed (my development workflow and the clarity of the reasoning about my application are greatly improved). I decided that I would like to start working in real applications.

With that said, I have a concern about performance (I looked at the performance messages, but did not see the address of my problem directly). I think this question is not specific to Aurelia, the question is more about Redux and its use in non-reactive libraries.

Let me preface my question with my understanding of Redux (maybe my question really arises from a misunderstanding?). Essentially, I understand Redux that there is a store (javascript object) and a reduction function. Now the reduction function can be defined as a tree of functions (each of which is responsible for changing a specific branch of the shared storage), however, in fact, Redux receives a single recovery function (it has no way to find out how many functions were composed to create this single function).

The way I use Redux looks like this (just an example):

@inject(Store) export class TodosListCustomElement { constructor(store) { this.store = store; } activate() { this.update(); this.unsubcribe = this.store.subscribe(this.update.bind(this)); } deactivate() { this.unsubcribe(); } update() { const newState = this.store.getState(); this.todos = newState.todos; } toggleCompleted(index) { this.store.dispatch({ type: UPDATE_TODO, payload: { index, values: { isCompleted: !this.todos[index].isCompleted } } }); } } 

In fact, each component down the component tree subscribes to saving changes and updating the data that it needs from the repository.

My concern is that there seems to be a lot going on in every published action. For example, let's say I have a large application with the same large storage and gearbox tree. Suppose that there is some throttle text field that sends changes to one text field (in one list item) in the repository every 250 ms. This will mean that as the user enters data, the entire reducer function is performed every 250 ms (which may mean the execution of a rather large number of its descendant reducers), as well as the execution of all subscription functions. In principle, it seems that overhead can change even the smallest part of the store.

Contrast this with the standard binding (in Aurelia), where there is only one related function (mutation observer) that must execute every 250 ms to update the model ...

Since I'm new to Redux, I think there is a good chance that I naively underestimate something, etc. I apologize in advance and hope that you will be corrected / put on the right path (because my limited experience using Redux was very pleasant).

Thank you in advance

+5
source share
1 answer

You really describe the situation quite well on several levels.

First, React-Redux bindings do a lot of work to ensure that connected components only actually re-render when some of the data related to that component has changed. This is achieved due to the presence of a connected component with the mapStateToProps function, which retrieves the data that the component wants to receive from the storage state. The shell components generated by connect will re-run their mapState functions after each mapState and perform small comparisons between the last return values ​​and the previous return values ​​to see if the data has changed. This reduces the number of actual UI updates that need to be performed.

There are also trade-offs related to how you handle related forms. Yes, sending actions for each keystroke is likely to be ineffective overall. I personally use the React form shell component that locally localizes these text input changes and only sends a debounced Redux action after the user has completed the input.

The React-Redux binding has recently been rewritten and is now mainly based on memoized selector functions, rather than most of the logic inside React components. I don’t know how Aurelia bindings combine, but I suspect that they could use most of the work that was done to optimize React bindings.

You might be interested in some of the articles I have about performance related to Redux. See the Redux question question at http://redux.js.org/docs/faq/Performance.html#performance-scaling , as well as articles on my React / Redux link list at https://github.com/markerikson /react-redux-links/blob/master/react-performance.md#redux-performance .

+3
source

Source: https://habr.com/ru/post/1261793/


All Articles