使用async react-select与redux-saga

发布时间：2020-12-15 20:53:28 所属栏目：百科来源：网络整理

导读：我尝试实现异步react-select( Select.Async).问题是,我们想在redux-saga中进行提取.因此,如果用户键入内容,则应触发获取操作.然后佐贺取出记录并将它们保存到商店.到目前为止这个工作. 不幸的是,loadOptions必须返回一个promise或者应该调用回调.由于新检索

我尝试实现异步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上解析它.这样丑陋,并没有正常工作,所以我寻找一个更好的解决方案.

谢谢

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中的所有副作用/异步调用

我希望这个答案对你有用.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!