11

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

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

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

谢谢

4

2 回答 2

17

redux-saga用于处理副作用，例如异步接收react-select. 这就是为什么你应该把异步的东西留给redux-saga. 我从未使用过react-select，但只需查看文档，我就会以这种方式解决它：

您的组件变得非常简单。只需从您的 redux 商店获取value和获取。是动作的动作创建者：optionsoptionsRequestedOPTIONS_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)

一个 saga 定义OPTIONS_REQUESTED监视由 触发的动作，从服务器onInputChange加载给定的数据searchTerm并调度OPTIONS_RECEIVED动作以更新 redux 存储。

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

换句话说：使您的组件尽可能纯净并处理所有副作用/异步调用redux-saga

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

于 2017-04-02T13:29:41.340 回答
-1

主要思想是您能够使用应用程序上下文调度 redux 操作

import React from 'react';
import { connect } from 'react-redux';

import Select from '@components/Control/Form/Skin/Default/Select';
import { reduxGetter, reduxSetter, required as req } from '@helpers/form';
import { companyGetTrucksInit } from "@reduxActions/company";

import AppContext from '@app/AppContext';

const FIELD_NAME = 'truck';

export const getReduxValue = reduxGetter(FIELD_NAME);
export const setReduxValue = reduxSetter(FIELD_NAME);

const SelectCompanyTruck = (props) => {
    const {
        required,
        validate=[]
    } = props;

    const vRules = [...validate];

    if (required)
        vRules.push(req);


    return (
        <AppContext.Consumer>
            {({ dispatchAction }) => (
                <Select
                    loadOptions={(inputValue, callback) => {
                        function handleResponse(response) {
                            const { data: { items } } = response;
                            const options = items.map(i => ({ label: i.name, value: i.id }));

                            callback(options);
                        }

                        dispatchAction(companyGetTrucksInit, { resolve: handleResponse, inputValue });
                    }}
                    name={FIELD_NAME}
                    {...props}
                />
            )}
        </AppContext.Consumer>
    );
}

export default SelectCompanyTruck;
于 2019-03-13T13:42:29.163 回答