Redux seems slow when saving large collection to store

user_2223902 0
Viewed 2443

Simplified situation:

I am working on a live application that needs to save around 650 objects as an array into a Redux store.

The application holds a ReactJs - Redux - ImmutableJs - Reselect techstack. But I have identified the slowdown to actually saving the data into the Redux store.

Using ImmutableJs is irrelevant. I have created POC's with and without this framework and the performance did not change.

Following code is my SearchReducer

const searchReducer = (state = fromJS(defaultState), action) => {
  switch(action.type) {
    case SEARCHMUSICIAN:      
      const { searchTerm, results } = action.payload;

      return state.set('searchTerm', searchTerm)
                  .set('foundMusicians', fromJS(results));

    default:
      return state;
  }
};

What can explain the slowdown? Is Redux actually slow with bigger collections or large amounts of data at once? Is there a flag or configuration that I am missing that would increase the Redux performance?

Performance example without Immutable Performance example with Immutable

react-redux redux reactjs javascript
1 Answers

I think we got it fixed now. Apparently Redux is very slow with big arrays. I have converted the dispatched payload to an object and now the saving-to-store delay goes from 2-3 seconds to 30-50 milliseconds.

My guess is that Redux has trouble with internal optimizations when using larger arrays. The saving-to-store delay also increases exponentially when the array size increases. This also does not happen when using an object and increasing the amount of properties or keys.

user_22239020
Related