Multiple redux-sagas

Question

I use react-redux and redux-saga for API calls from this example. My target is to do another API calls with different urls and to use them in different pages. How to achieve that?

Sagas:

import { take, put,call } from 'redux-saga/effects'; import { takeEvery, delay ,takeLatest} from 'redux-saga'; function fetchData() {     return  fetch("https://api.github.com/repos/vmg/redcarpet/issues?state=closed")     .then(res => res.json() )     .then(data => ({ data }) )     .catch(ex => {         console.log('parsing failed', ex);         return ({ ex });     }); } function* yourSaga(action) {     const { data, ex } = yield call(fetchData);     if (data)     yield put({ type: 'REQUEST_DONE', data });     else     yield put({ type: 'REQUEST_FAILED', ex }); } export default function* watchAsync() {     yield* takeLatest('BLAH', yourSaga); } export default function* rootSaga() {     yield [         watchAsync()     ] } 

App:

import React, { Component } from 'react'; import { connect } from 'react-redux'; class App extends Component {     componentWillMount() {         this.props.dispatch({type: 'BLAH'});     }     render(){        return (<div>             {this.props.exception && <span>exception: {this.props.exception}</span>}             Data: {this.props.data.map(e=><div key={e.id}>{e.url}</div>)}            </div>);     } } export default connect( state =>({     data:state.data , exception:state.exception }))(App); 

My target is to make another saga, which I will use in another component, and both to not mess with each other. Does that possible?

Answer 1

Redux Saga uses the all function in the recent version (0.15.3) to combine multiple sagas to one root saga for the Redux store.

import { takeEvery, all } from 'redux-saga/effects';  ...  function *watchAll() {   yield all([     takeEvery("FRIEND_FETCH_REQUESTED", fetchFriends),     takeEvery("CREATE_USER_REQUESTED", createUser)   ]); }  export default watchAll; 

In the Redux store you can use the root saga for the saga middleware:

import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga';  import rootReducer from './reducers'; import rootSaga from './sagas';  const sagaMiddleware = createSagaMiddleware(); const store = createStore(   rootReducer,   applyMiddleware(sagaMiddleware) );  sagaMiddleware.run(rootSaga) 

Answer 2

Of course, that is the whole point of sagas.

A typical application will have multiple sagas waiting in the background, waiting for a particular action / actions (take effect).

Below is an example of how you can setup multiple sagas from redux-saga issue#276:

./saga.js

function* rootSaga () {     yield [         fork(saga1), // saga1 can also yield [ fork(actionOne), fork(actionTwo) ]         fork(saga2),     ]; } 

./main.js

import { createStore, applyMiddleware } from 'redux' import createSagaMiddleware from 'redux-saga'  import rootReducer from './reducers' import rootSaga from './sagas'   const sagaMiddleware = createSagaMiddleware() const store = createStore(   rootReducer,   applyMiddleware(sagaMiddleware) ) sagaMiddleware.run(rootSaga)