this の例からのAPI呼び出しには、react-reduxとredux-sagaを使用します。私の目標は、異なるURLで別のAPI呼び出しを行い、異なるページでそれらを使用することです。それを達成する方法は?
サガス:
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);
私の目標は、別のコンポーネントで使用する別のサガを作成し、両方が互いに混乱しないようにすることです。それは可能ですか?
もちろん、それがサガのポイントです。
典型的なアプリケーションでは、複数のサガがバックグラウンドで待機し、特定のアクション(take
効果)を待機します。
以下は redux-saga issue#276 から複数のsagasをセットアップする方法の例です。
./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)
Redux Sagaは、最新バージョン(0.15.3)のall
関数を使用して、複数のsagasをReduxストアの1つのルートsagaに結合します。
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ストアでは、サガミドルウェアにルートサガを使用できます。
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)