2017-01-19 11 views
1

、私が持っている:Reactでredux/sagasの発送を約束するにはどうすればいいですか?私のコンポーネントで

export default connect(
    (state) => ({ 
    autocomplete: state.autocomplete, 
    search: state.search, 
    }), 
    (dispatch) => ({ 
    onSearch: (location) => (q) => dispatch(actions.push(getUrlWithQS(location, { qs: { q } }))), 
    onAutocomplete: (q) => dispatch(actions.autocomplete({ q })), 
    }), 
    (stateProps, dispatchProps, ownProps) => ({ 
    ...stateProps, 
    ...dispatchProps, 
    ...ownProps, 
    onSearch: dispatchProps.onSearch(ownProps.location), 
    }) 
)(Home) 

私も持っている:

doSearch(location) { 
    console.log(this.props.onSearch); 
    this.props.onSearch(location) 
    } 

それは私のためonSearch発送が完了したとき、私は知ることができるので、約束を作ることは可能ですか?

答えて

1

メンタルモデルでは、サガは、副作用の原因となるアプリケーションの アプリケーション内の別のスレッドのようなものです。

redux-sagaは、いくつかの特定のアクションがストアにディスパッチされたときにタスクを起動するための内部関数(takeLatest、takeEveryなど)をラップするヘルパーエフェクトを提供します。

副作用を処理するために、redux-sagaあなたがエラーまたは成功例を処理するための派遣他のアクション(ここでは行動のようなあなたの約束がある)することができます。

アクションの後でコンポーネントを更新するには、componentWillReceiveProps(nextProps)を使用して状態の変更を検出し、後で何かを行うことができます。

サガ非同期アクションでは、putまたはcallを使用して、必要な副作用を得ることができます。 documentationから

Releventのexemple:

import { call, put } from 'redux-saga/effects' 

export function* fetchData(action) { 
    let url = action.payload.url 
    try { 
     const data = yield call(Api.fetchUser, url) 
     yield put({type: "FETCH_SUCCEEDED", data}) 
    } catch (error) { 
     yield put({type: "FETCH_FAILED", error}) 
    } 
} 

は各FETCH_REQUESTEDアクションに上記のタスクを起動するには、次の

import { takeEvery } from 'redux-saga/effects' 

function* watchFetchData() { 
    yield takeEvery('FETCH_REQUESTED', fetchData) 
} 
関連する問題