Как я могу обещать цепочку редукции/sagas отправки в React?

Question

В моем компоненте, у меня есть:

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 обещание, так что я могу знать, когда отправка завершена?

Answer 1

Ментальная модель заключается в том, что сага подобна отдельной теме в вашем приложении , который несет исключительную ответственность за побочные эффекты.

redux-saga предоставляет некоторые вспомогательные эффекты, обертывающие внутренние функции (takeLatest, takeEvery и т. Д.) Для запуска задач, когда в магазин отправляются определенные действия.

Чтобы справиться с побочными эффектами, redux-saga позволяет диспетчерских других действий для обработки ошибок или успеха случаев (здесь ваше обещание, как поведение).

Чтобы обновить компонент после действия, componentWillReceiveProps(nextProps) позволяет обнаруживать изменения состояния и делать что-то после этого.

В асинхронном действии саги вы можете использовать put или call, чтобы получить желаемые побочные эффекты.

Релевент Exemple из documentation:

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