多个redux-sagas

时间:2016-09-23 17:43:04

标签: javascript reactjs redux react-redux redux-saga

我使用react-redux和redux-saga进行来自prop()示例的API调用。我的目标是使用不同的URL进行另一个API调用,并在不同的页面中使用它们。如何实现?

萨加斯:

$("meta[data-my-id]").data("my-id");
//Or
$("meta[data-my-id]").prop("data-my-id");

应用

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()
    ]
}

我的目标是制作另一个传奇,我将在另一个组件中使用,并且两者都不会相互混淆。那可能吗?

3 个答案:

答案 0 :(得分:17)

当然,这就是传奇的全部意义。

典型的应用程序将在后台等待多个传奇,等待特定的操作/操作(take效果)。

以下是如何从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)

答案 1 :(得分:15)

Redux Saga使用最新版本中的all函数(0.15.3)将多个传奇组合为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;

在Redux商店中,您可以使用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)

答案 2 :(得分:5)

自从发布最新答案以来,情况有所改变。如https://redux-saga.js.org/docs/advanced/RootSaga.html所述,创建根传奇的首选方法是使用spawn

export default function* rootSaga() {
  yield spawn(saga1)
  yield spawn(saga2)
  yield spawn(saga3)
}

spawn是一种效果,它将使您的孩子传奇与父传奇断开连接,使其失败而不会导致父传奇崩溃。这仅意味着即使一个传奇失败,rootSaga和其他传奇也不会被杀死。 还有一种方法可以恢复失败的Sagas(有关更多信息,请参见上面的链接)。