reactjs - Responding to high frequency state changes in React.js / Flux -


i have application receives messages server every 1 second , via socket.io these messages broadcast react component.

my react component using flux style architecture, calls action when message received adds (or updates) record in collection in store.

my component monitors changes on store , updates ui when changes. in case, draws marker on map.

the problem due frequency of updates component redraws markers every second, don't want.

i'm looking approach allow map component respond changes in collection in store, not have state update every second.

i thought have collection raw data, , update networkgps collection selectively in store, component seems change based on property in store seem part of state.

in summary i'm looking to:

  • collect data every 1 second in raw form , add data store.
  • bind component collection in store update when changes require ui redraw.

what think need do:

either:

  • avoid putting raw data state of store (at moment i'm unsure how declare collection not part of state)

or

  • make component more clever when redraws, doesn't try redraw on each state change.

i'm not sure appropriate solution problem, info gratefully receieved.

sorry if question little unclear, i'm new react / flux. please ask clarifications.

edit

at moment getting round issue storing array of items (map markers in example) want component display in component :( when state changes , render called, intercept state properties, decide if needs change in collection of markers , amend them if needed. if no changes needed, collection in component stays same , no redraw performed.

this not ideal, feel should able allow component respond specific state changes i've not found yet, still looking better answer.

there couple of ways approach this:

1) use shouldcomponentupdate compare old props , new props, re-rendering new marker states.

2) switch cursor-based state tree automatically triggers renders views bound specific parts of state tree have changed. believe baobab 1 such library. see om (written in clojurescript) , number of other flux implementations.

given impact of #2 vote go route of #1.


Comments

Popular posts from this blog

java - Date formats difference between yyyy-MM-dd'T'HH:mm:ss and yyyy-MM-dd'T'HH:mm:ssXXX -

c# - Get rid of xmlns attribute when adding node to existing xml -