Saga middleware does not work

[piotrkochan]

Unfortunately Saga created on the contentScript's Store proxy side does not work - it won't receive any actions:

import {Store, applyMiddleware} from 'webext-redux';
import createSagaMiddleware from 'redux-saga'
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];

const proxyStore = new Store();
const storeWithMiddleware = applyMiddleware(proxyStore, ...middleware);

sagaMiddleware.run(rootSaga);

saga:

import {takeEvery} from 'redux-saga/effects'

export function* onAddCount(action) {
  // not firing
  console.log(action);
  debugger;
}
export default function* rootSaga() {
  yield takeEvery("ADD_COUNT", onAddCount);
}

Example Popup component to test:

import React from 'react';
import {connect} from 'react-redux';

const App = ({count, dispatch}) => {
  return <><strong>Count = {count}</strong>
    <button onClick={() => dispatch({type: "ADD_COUNT"})}>Dispatch add</button>
  </>
};
const mapStateToProps = state => {
  return {
    count: state.red,
  }
};
export default connect(mapStateToProps)(App);

and the background reducer:

const initialState = 0;

export default (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_COUNT':
      return state + 1;
    default:
      return state;
  }
};

[bartekus]

Is there a reason why you are trying to create saga on the contentScript side? Doing it in the background script does work, here is how I've implemented it for your reference: cra-modular-redux-auth0-saga-browser-extension

[hungluu]

Is there a reason why you are trying to create saga on the contentScript side? Doing it in the background script does work, here is how I've implemented it for your reference: cra-modular-redux-auth0-saga-browser-extension

How should I trigger content script to query document selector and send result to background, then to popup? I'm looking for a way to do that, was going to use saga on content script @@

[bartekus]

Content script is what you're going to inject into the website. The way you specify it, is thru your manifest, for example:

"content_scripts": [
    {
      "matches": ["*://*/*"],
      "run_at": "document_idle",
      "js": ["contentscript.js"]
    }
  ],

In this example case, the content of contentscript.js is going to be injected everywhere (since our matches uses pretty wide open criteria/wildmask: *://*/*) and executed at document_idle.

Content scripts running at "document_idle" do not need to listen for the window.onload event, they are guaranteed to run after the DOM is complete. If a script definitely needs to run after window.onload, the extension can check if onload has already fired by using the document.readyState property. More Info

In terms of communication between content script and background, as well as popup and background, you can do that using message passing as well as redux. However, your store should be initiated thru background, and you should probably setup onMessage listener there too. This will allow you to pass a message from your content script to background, using sendMessage..

[zshannon]

I need this to work as well, and it seems like it doesn't because it's connected via a subscription to the store instead of as a middleware so actions aren't available to pipe out to the messaging bus. I suspect this can be improved so we are able to pass actions through the bus (and run middlewares out on the proxy store).

Am I missing something @tshaddix or does that seem possible to you, too? I need this feature so will give writing it a try and happy to send a PR if others are interested :)

[bartekus]

@zshannon did you have a look at: alias

[zshannon]

Yep, alias is great! Doesn’t help for data flow that originates outside the remote ;)

[bartekus]

Could you help me understand in what manner you are trying to use this implementation?

I'm running my own middleware in combination with webext-redux as well as using redux-saga so I'm trying to understand how you are trying to use this.

You pointed to this issue, which is related to trying to implementing store creation on the contentScript which is not what your PR is describing.