Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Saga middleware does not work #243

Open
piotrkochan opened this issue Mar 3, 2020 · 7 comments
Open

Saga middleware does not work #243

piotrkochan opened this issue Mar 3, 2020 · 7 comments

Comments

@piotrkochan
Copy link

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
Copy link

bartekus commented Apr 4, 2020

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
Copy link

hungluu commented Apr 16, 2020

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
Copy link

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
Copy link

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
Copy link

@zshannon did you have a look at: alias

@zshannon
Copy link

zshannon commented Apr 18, 2020

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

@bartekus
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants