使用async react-select与redux-saga

Question

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

谢谢

Answer 1

redux-saga用于处理副作用,如异步接收选项react-select.这就是为什么你应该留下异步的东西redux-saga.我从未使用过react-select,只需查看文档,我就会这样解决:

您的组件变得非常简单.刚刚获得value并options从你的终极版商店.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)

一个传奇定义OPTIONS_REQUESTED监视由其触发的操作,从服务器onInputChange加载数据searchTerm并调度OPTIONS_RECEIVED操作以更新redux存储.

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

换句话说:让你的Component尽可能纯净并处理所有副作用/异步调用 redux-saga

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