我尝试实现异步react-select(
Select.Async).问题是,我们想在redux-saga中进行提取.因此,如果用户键入内容,则应触发获取操作.然后佐贺取出记录并将它们保存到商店.到目前为止这个工作.
不幸的是,loadOptions必须返回一个promise或者应该调用回调.由于新检索的选项通过更改属性进行传播,因此我看不到将Select.Async与saga一起使用来执行异步提取调用.有什么建议么?
不幸的是,loadOptions必须返回一个promise或者应该调用回调.由于新检索的选项通过更改属性进行传播,因此我看不到将Select.Async与saga一起使用来执行异步提取调用.有什么建议么?
<Select.Async multi={false} value={this.props.value} onChange={this.onChange} loadOptions={(searchTerm) => this.props.options.load(searchTerm)} />
我有一个hack,我将回调分配给一个类变量并在componentWillReceiveProps上解析它.这样丑陋,并没有正常工作,所以我寻找一个更好的解决方案.
谢谢
redux-saga用于处理副作用,例如异步接收react-select的选项.这就是为什么你应该把异步的东西留给redux-saga.我从来没有使用过react-select,但只要查看文档,我就会这样解决:
您的组件变得非常简单.只需从您的redux商店获得价值和选择. optionsRequested是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)
传奇定义监视由onInputChange触发的OPTIONS_REQUESTED操作,从服务器加载给定searchTerm的数据,并调度OPTIONS_RECEIVED操作以更新redux存储.
function* watchLoadOptions(searchTerm) { const options = yield call(api.getOptions,searchTerm) yield put(optionsReceived(options)) }
换句话说:让您的Component尽可能纯净并处理redux-saga中的所有副作用/异步调用
我希望这个答案对你有用.