CODEWITHSUNDEEP
javascriptreactjsreact-reduxmiddlewareredux-saga
meds
meds

Reputation: 22916

How to call saga from external sagas.js?

I have a sagas.js in containers/App/sagas.js which contains a login saga, I'm trying to call it from a login popup which also has its own sagas.js (components/LoginPopup/sagas.js) and tied the following solution together:

// containers/App/saga.js:

export const LOGIN = 'FUNAPP/App/LOGIN';

export const requestLogin = (payload: Object) => ({
  type: LOGIN + REQUESTED,
  payload,
});


export function* LoginRequest(payload) {
  window.alert("LOGIN REQUEST ");
  window.alert(payload)
}

export default function*(): Saga<void> {
  yield [
    takeLatest(LOGIN + REQUESTED, LoginRequest)
  ];
}

// components/LoginPopup/saga.js:

import { requestLogin, LoginRequest, LOGIN } from '../../containers/App/sagas';
export default function* (): Saga<void> {
    yield [
        takeLatest(LOGIN + REQUESTED, LoginRequest)
    ]
}

// components/LoginPopup/index.js
import { requestLogin } from '../../containers/App/sagas'

const mapStateToProps = state => ({
});

const mapDispatchToProps = dispatch => ({
    requestLogin: (payload) => dispatch(requestLogin(payload))
});

export default compose(
    injectSagas({ key: 'app', saga, reducer }),
    connect(mapStateToProps, mapDispatchToProps)
)(LoginPopup);

This feels like a dirty way of doing things, I was hoping all I would need to do is import the requestLogin function and everything would just work, or at least something more clean than exporting all the relevant functions into the LoginPopup saga there.

Upvotes: 4

Views: 2194

Answers (3)

Shiroo
Shiroo

Reputation: 666

function* sagaOne() {
}

function* sagaTwo(action) {
  yield call(sagaOne); 
}

This one will call sagaOne from sagaTwo. The only question is: what you want to do with it? If you want to connect it with redux actions or make it callable from other saga or whatever. Technically you can launch both sagas from same action type by using takeLatest array. If you want to have result in one saga within another the above solution is the way to go with.

Upvotes: 0

JenuJ
JenuJ

Reputation: 456

window.loginRquest = require('../../containers/App/sagas');

Then you can access loginRquest as global javascript(vanilla js) variable in console.

Upvotes: 0

Alexander Vitanov
Alexander Vitanov

Reputation: 4141

As far as I understand this is what you might be looking for:

// components/LoginPopup/saga.js:

import { all, call } from 'redux-saga/effects'
import loginRquest from '../../containers/App/sagas';

export default function* (): Saga<void> {
    yield all([
       call(loginRquest),
    ])
}

Upvotes: 2

Related Questions