前端之家收集整理的这篇文章主要介绍了
使用async react-select与redux-saga，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我尝试实现异步react-select(
Select.Async).问题是,我们想在redux-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上解析它.这样丑陋,并没有正常工作,所以我寻找一个更好的解决方案.
谢谢
@H_
404_9@
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中的所有副作用/异步调用
我希望这个答案对你有用.
