Nhiều redux-sagas

Question

Tôi sử dụng phản ứng-redux và redux-saga cho các cuộc gọi API từ ví dụ this. Mục tiêu của tôi là thực hiện một cuộc gọi API khác với các url khác nhau và sử dụng chúng trong các trang khác nhau. Làm thế nào để đạt được điều đó?

saga:

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); 

mục tiêu của tôi là để thực hiện một saga, mà tôi sẽ sử dụng trong thành phần khác, và cả hai để không gây rối với nhau . Điều đó có thể?

Answer 1

Tất nhiên, đó là toàn bộ điểm sagas.

Một ứng dụng điển hình sẽ có nhiều sagas đang đợi trong nền, chờ đợi một hành động/hành động cụ thể (hiệu ứng take).

Dưới đây là một ví dụ về cách bạn có thể thiết lập nhiều saga từ 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) 

Answer 2

Redux Saga sử dụng all chức năng trong phiên bản mới (0,15 .3) để kết hợp nhiều sagas với một saga gốc cho kho lưu trữ Redux.

import { takeEvery, all } from 'redux-saga/effects'; 

... 

function *watchAll() { 
    yield all([ 
    takeEvery("FRIEND_FETCH_REQUESTED", fetchFriends), 
    takeEvery("CREATE_USER_REQUESTED", createUser) 
    ]); 
} 

export default watchAll; 

Trong Redux lưu trữ, bạn có thể sử dụng saga gốc cho middleware saga:

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)