zalmoxisus / crossbuilder

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.
MIT License
484 stars 50 forks source link

calling background functions triggers twice #18

Closed gurkerl83 closed 9 years ago

gurkerl83 commented 9 years ago

Hi, I don`t know if this is the intended result, but subscribing to the store through

store.subscribe(handleChange)

(within src/browser/extension/background/badge.js)

triggers twice if the increment function was called with

bg('increment')

(from src/app/components/Counter.js) .

badge.js compares previousValue and currentValue and decides if to update the badge text.

I don`t know anything about redux-persist and other involvement libraries but causing an automated secondary call of the listener function requires a state traversal like previousValue and currentValue even if the intended function call (background script) does not depend / involve on any state changes e.g. the increment action changing the state.counter.count value.

Maybe someone could explain which parts are responsible calling the listeners?

Thanks!

zalmoxisus commented 9 years ago

Yes, it is the intended result as the state is changed twice:

  1. The background page receives the command from an other page through a state rehydrate action.
  2. The background page dispatches a new action ('increment').

The idea of this approach was to replace the classic chrome extension messaging with just state rehydratations (implemented via a chrome/local storage listiner), so it would be easy to make a cross browser extension and you care only about actions and states. But as you see, we loose the performance and it could be an error prone in the future. As I told, I want to implement a better way for using background's store. I will create a new issue with the proposal for v0.5. Any suggestions are welcome.

But, anyway, you are right, the issue remains open, we will still have a state traversal on any state changes, even if the actions are not changing the state.counter.count value. So we have to use a store enhancer instead of having a store.subscribe, but I don't know how to still keep the badge script separate from the app, so one can easily add this functionality by including a module in the background page. Also, a solution could be to use a debounced subscribe handler with redux-batched-subscribe.