Any example how to integrate redux-saga with ng-redux?

[nahidupa]

i'm tried to integrate with redux-saga middleware.
But getting following error
"Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware(…)"
My code is look like
export function ConfigRedux($ngReduxProvider) {
$ngReduxProvider.createStoreWith(rootReducer, [sagaMiddleware]);
sagaMiddleware.run(helloSaga);
}
My understanding is createStoreWith do applyMiddleware internally. What i'm missing here?

[jeremygrant]

I think you'll find you need to run the sagaMiddleware.run(helloSaga) in the run phase when $ngRedux has been initialized.

export function ConfigRedux($ngReduxProvider) {
  $ngReduxProvider.createStoreWith(rootReducer, [sagaMiddleware]);
}

export function RunRedux() {
  sagaMiddleware.run(helloSaga);
}

angular.module('myModule', []).config(ConfigRedux).run(RunRedux);

[jhuesos]

the solution doesnt work for me. I am applying your solution:

import sagaMiddleware from 'redux-saga';
...
angular.module('myModule', []).config(ConfigRedux).run(RunRedux);

function ConfigRedux($ngReduxProvider) {
  $ngReduxProvider.createStoreWith(rootReducer, [sagaMiddleware]);
}

function RunRedux() {
  sagaMiddleware.run(helloSaga);
}

sagaMiddleware.run(helloSaga) is throwing the following exception:

Uncaught TypeError: _reduxSaga2.default.run is not a function

According to the saga tutorial, you need to call run in the result of calling createSagaMiddleware

// ...
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

// ...
import { helloSaga } from './sagas'

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(helloSaga)

Any ideas?

[jeremygrant]

It looks like you're assigning the default import from redux-saga to sagaMiddleware, but it actually returns a factory, so you need to initialise a sagaMiddleware, pass that into $ngReduxProvider.createStoreWith and then sagaMiddleware.run will be available

import createSagaMiddleware from 'redux-saga'
import rootReducer from './reducers'
import { helloSaga } from './sagas'

const sagaMiddleware = createSagaMiddleware()

angular.module('myModule', []).config(ConfigRedux).run(RunRedux);

function ConfigRedux($ngReduxProvider) {
  $ngReduxProvider.createStoreWith(rootReducer, [sagaMiddleware]);
}

function RunRedux() {
  sagaMiddleware.run(helloSaga);
}

[jhuesos]

I tried that as well but it doesn't work. I get the following error:

utils.js:188 uncaught at check Before running a Saga, you must mount the Saga middleware on the Store using applyMiddlewarelog @ utils.js:188check @ utils.js:43sagaMiddleware.run @ middleware.js:60(anonymous function) @ app.js:119invoke @ angular.js:4708(anonymous function) @ angular.js:4516q @ angular.js:322db @ angular.js:4516c @ angular.js:1777Ac @ angular.js:1798fe @ angular.js:1683(anonymous function) @ angular.js:31018b @ angular.js:3197Rf @ angular.js:3487d @ angular.js:3475
utils.js:44 Uncaught Error: Before running a Saga, you must mount the Saga middleware on the Store using applyMiddleware

@jeremygrant have you tried yourself in a project to make it work? I am starting to think that ngRedux is incompatible with this middleware...

Btw, many thanks in advance

[jeremygrant]

@jhuesos yep I have it working.

This is a stripped back version of what I have.

import angular from 'angular'
import ngRedux from 'ng-redux'
import createSagaMiddleware from 'redux-saga'
import rootSaga from './sagas'
import rootReducer from './reducers'

const sagaMiddleware = createSagaMiddleware()

angular.
  module('app', [ngRedux]).
  config(['$ngReduxProvider', ($ngReduxProvider) => {
    $ngReduxProvider.createStoreWith(rootReducer, [sagaMiddleware], [], {})
  }]).
  run(() => { sagaMiddleware.run(rootSaga) })

Based on your error the only thing I can think of that could be causing it in your version and not mine is that I'm injecting $ngRedux elsewhere, so it may just be luck that $ngReduxProvider.$get is getting called before the sagaMiddleware.run is called. If that's the case I'd imagine it would work for you as is if you change

function RunRedux() {
  sagaMiddleware.run(helloSaga);
}

to

function RunRedux($ngRedux) {
  sagaMiddleware.run(helloSaga);
}

If that doesn't help, it may be a version issue? I'm using these versions:

ng-redux@3.3.3
redux@3.4.0
redux-saga@0.10.4

[jhuesos]

Yes, apparently I need to inject $ngRedux in the run function to make it work.... It is strange, isn't it?

I am a newbie with redux/ngredux, but do you think this is a bug on ngredux or redux-saga?

[wbuchwalter]

Most likely not a bug (it's a feature 😉 ).

You're doing:

function ConfigRedux($ngReduxProvider) {
  $ngReduxProvider.createStoreWith(rootReducer, [sagaMiddleware]);
}

function RunRedux() {
  sagaMiddleware.run(helloSaga);
}

But ngRedux doesn't create the store right away. It's an async operation, the store will only be created during angular's run phase, after the config phase.
The reason for that, is that if you have some injectable middlewares,they will need to be defined before we create the store, and they won't be defined before the run phase, so we have to wait.

So here, RunRedux can happen before the store is created, which would cause your error.

By doing something like:

myModule.run([$ngRedux, ngRedux => sagaMiddleware.run(helloSaga))

You're forcing angular to run $ngReduxProvider.$get which create the store, before executing your .run().

[wbuchwalter]

Assuming the issue is resolved.
If that's not the case, let me know and I'll reopen.

[sibelius]

@wbuchwalter great work on this package

u should consider adding a section of how to configure redux-saga in angular as redux-saga is used by a lot of people

[sibelius]

@jeremygrant @nahidupa how can I inject $resource to a saga? or r u using fetch or other approach?

[joekrie]

@sibelius I use fetch, which works nicely with the sagas:
yield fetch("http://some-url").then(res => res.json())