React，Redux设计目标

Question

Some research:

The basic idea of the app: It has two separate item pools, 1: 'input items' 2: 'output items'. Input/s can be assigned to Output/s but not opposite. Assigning is done by selecting inputs (click on them) and just pressing some of the output items. But same logic does not make a sense in opposite way. So if some outputs are selected and input has been pressed it would be nice to deselect those outputs.

state trasition image < visual version of description below

My first idea was to make SELECT/UNSELECT acton creators and 'selection' reducer what updates selection state based on item triggered actions. (Basically, this reducer decides what is selected and what is not) Pool containers listen to this reducer and accordingly updates its child items.

In this scenario, I face a huge problem. Whenever a user clicks the item - every single item is rerendered. It feels like insane processing overkill just to change a few object properties. Besides item count can easily reach few hundreds.

A bit better performance solution in my mind was to let the items to toggle appearance themselves and under right circumstances dispatch UNSELECT_INPUTS event from 'selection' reducer. Create some kind of 'inputsDeselected' reducer and make pools to listen for that.

This scenario doesn't look cool either.

So while stumbling over redux stuff found this piece of code:

     this.unsubscribe = store.subscribe(() => {
        this.setState({ storeState: store.getState() });
     });

It can be used to dynamically subscribe to 'selection' reducer when item selected and unscribe when item unselected by a user. If the reducer change item state while it is selected it has a chance to respond accordingly. This probably could make performance issues acceptable.

So far this is my own research and knowledge state in react-redux. Hope that makes any sense.

I would really appreciate your knowledge how to solve this.

PS I'm pretty new to all this web UI stuff and Javascript ecosystem so confusion is pretty huge looking to all of this.

I know I could do this by some SelectionState object and few callbacks from selected items or some another 'shortcut' way, and it would be very acceptable for a scale of this project. But I thought it would be cool to make this in more or less Redux 'right' way.

Thank you for reading all this crap! :)

Answer 1

Well if I got that right

Cant individually rerender selectable components without rerendering components that don't have to be rerendered .

You should take a look at React PureComponent . It basically shallow compares you component's props on shouldComponentUpdate method and if the props have not changed it doesn't re-render (returns false ). You can still do it manually in a regular Component if you need more complex comparsions.

This is a great article about how ReactDOM works and it gave me some real good insights on how to increase the performance of my applications.

https://evilmartians.com/chronicles/optimizing-react-virtual-dom-explained

Good luck!

Answer 2

It is hard to say for sure without seeing your code, but I think you might benefit from having a state that contains raw data for your inputs and outputs. Then a separate state that keeps track of which inputs are selected and which outputs are selected, that way only the outputs which have selected state changed will be re rendered.

For example data state: { inputs: [{ id: 1 }, { id: 2 }], outputs: [{ id: 3 }, { id: 4 }] }

selected state: { selectedInputs: [1], selectedOutputs: [3] }

For clearing out the outputs, you would just clear out the selectedOutputs array.