将 async react-select 与 redux-saga 结合使用 [英] Use async react-select with redux-saga

问题描述

我尝试实现异步反应选择(Select.Async).问题是，我们想在 redux-saga 中进行 fetch.因此，如果用户键入内容，则应触发 fetch-action.然后 Saga 获取记录并将它们保存到商店.到目前为止，这有效.不幸的是 loadOptions 必须返回一个承诺或者回调应该被调用.由于新检索到的选项通过更改属性进行传播，因此我无法将 Select.Async 与 saga 一起使用来执行异步获取调用.有什么建议吗?

I try to implement a async react-select (Select.Async). The problem is, we want to do the fetch in redux-saga. So if a user types something, the fetch-action should be triggered. Saga then fetches the record and saved them to the store. This works so far. Unfortunately loadOptions has to return a promise or the callback should be called. Since the newly retrieved options get propagated with a changing property, I see no way to use Select.Async together with saga to do the async fetch call. Any suggestions?

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

我有一个技巧，我将回调分配给一个类变量并在 componentWillReceiveProps 上解析它.那样丑陋且无法正常工作，所以我寻找更好的解决方案.

I had a hack where i assigned the callback to a class variable and resolve it on componentWillReceiveProps. That way ugly and did not work properly so i look for a better solution.

谢谢

推荐答案

redux-saga 用于处理副作用，例如 react-select 的异步接收选项.这就是为什么你应该把异步的东西留给 redux-saga.我从来没有用过 react-select 但只要看一下文档，我就可以这样解决:

redux-saga is for handling side effects like asynchronously receiving options for react-select. That's why you should leave the async stuff to redux-saga. I have never used react-select but by just looking at the documentation I would solve it this way:

您的组件变得非常简单.只需从您的 redux 商店中获取 value 和 options 即可.optionsRequested 是 OPTIONS_REQUESTED 动作的动作创建者:

Your component gets very simple. Just get value and options from your redux store. optionsRequested is an action creator for the OPTIONS_REQUESTED action:

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)

saga 定义监视由 onInputChange 触发的 OPTIONS_REQUESTED 操作，从服务器加载具有给定 searchTerm 的数据并分派 OPTIONS_RECEIVED 更新 redux 存储的操作.

A saga definition watches for OPTIONS_REQUESTED action that is trigged by onInputChange, loads the data with given searchTerm from server and dispatches OPTIONS_RECEIVED action to update redux store.

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

换句话说:使您的组件尽可能纯净，并在 redux-saga

In other words: Make your Component as pure as possible and handle all side-effect/async calls in redux-saga

希望这个回答对你有用.

I hope this answer was useful for you.

这篇关于将 async react-select 与 redux-saga 结合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！