비동기 반응 선택 - redux-saga 사용

Question

비동기 반응 선택 (Select.Async)을 구현하려고합니다. 문제는 redux-saga에서 가져 오기를 수행하는 것입니다. 따라서 사용자가 무언가를 입력하면 fetch-action이 트리거되어야합니다. Saga는 레코드를 가져 와서 저장소에 저장합니다. 이것은 지금까지 작동합니다. 아쉽게도 loadOptions가 약속을 반환해야하거나 콜백을 호출해야합니다. 새로 검색된 옵션은 변경되는 속성으로 전파되므로 Select.Async과 함께 비동기 가져 오기 호출을 수행 할 방법이 없습니다. 어떤 제안?

<Select.Async 
    multi={false} 
    value={this.props.value} 
    onChange={this.onChange} 
    loadOptions={(searchTerm) => this.props.options.load(searchTerm)} 
    /> 

나는 내가 클래스 변수에 콜백을 할당 componentWillReceiveProps에 그것을 해결 해킹을했다. 그렇게하면 못생긴 것이고 제대로 작동하지 않아서 더 나은 해결책을 찾는다.

감사

Answer 1

redux-saga 비동기 react-select 옵션을 수신하는 등 핸들링 부작용이다. 그래서 비동기 콘텐츠를 redux-saga으로 남겨 두어야합니다. 내가 react-select을 한번도 사용한 적은 없지만 문서를보고이 방법으로 해결할 것입니다.

구성 요소가 매우 간단합니다. 그냥 redux 가게에서 value과 options을 받으십시오. optionsRequested가 OPTIONS_REQUESTED 작업에 대한 작업의 창조자이다 : onInputChange 따라 트리거됩니다 OPTIONS_REQUESTED 조치를

const ConnectedSelect = ({ value, options, optionsRequested }) => (
    <Select 
    value={value} 
    options={options} 
    onInputChange={optionsRequested} 
    /> 
) 

export default connect(store => ({ 
    value: selectors.getValue(store), 
    options: selectors.getOptions(store), 
}), { 
    optionsRequested: actions.optionsRequested, 
})(ConnectedSelect) 

사가 정의 시계, 서버에서 주어진 searchTerm로 데이터를로드하고 REDUX 저장소를 업데이트 할 수 OPTIONS_RECEIVED 조치를 전달합니다. 즉

function* watchLoadOptions(searchTerm) { 
    const options = yield call(api.getOptions, searchTerm) 
    yield put(optionsReceived(options)) 
} 

은 : 가능한 한 순수한 구성 요소를 확인하고 나는이 대답은 당신을 위해 유용 희망 redux-saga

에있는 모든 부작용/비동기 호출을 처리합니다.