Question

我想调用第二个动作，但仅在第一个动作完成其请求时。我试图在第一次操作后调用它，但我很快就意识到我需要从响应中获取第二个函数的数据才能正常工作。

以前的项目工作版本：

onSubmit(values) {
    this.props.createPost(values, () => {
      this.props.history.push('/posts');
    });
  }

export function createPost({title, content}, cb) {
  return function(dispatch) {
    axios.post(`${ROOT_URL}/posts`, {title, content}, {
      headers: { authorization: localStorage.getItem('token')}
    })
      .then((response) => {
        dispatch({
          type: CREATE_POST,
          payload: response
        });
      })
      .then(() => cb())
      .catch((error) => {
        if(error.response) {
          console.log(error.response.data);
        }
        console.log("Problem submitting New Post", error);
      });
  }
}

工作结束版

出于某种原因，我通过第二个值的任何内容都返回undefined，因此给出了cb未定义的错误。

这是我正在调用的函数或操作：

export function sortOffers({ currency, name, geolocation, category, btc, sys, zec }, cb) {
  console.log(cb);
  return (dispatch) => {
    axios
      .get('/API/offers/sort', {
        params: { currency, name, geolocation, category, btc, sys, zec },
      })
      .then((response) => {
        dispatch({ type: SORT_OFFERS, payload: response.data });
        dispatch(reset('sorter'));
      })
      // .then(() => cb())
      .catch((err) => {
        alert(err);
      });
  };
}

我在提交表单之后在另一页上调用此内容：

   submitSort(values) {
    this.props.sortOffers(values, 12);
    // this.props.sortOffers(values, () => {
    //   this.props.filter(this.props.filterOption);
    // });
  }

问题是我想在此之后调用此操作this.props.filter(option)，但我需要完成第一个操作才能使其正常工作。不幸的是，cb在我的动作中返回undefined。我之前尝试过这个并且工作得很好所以我不确定我做错了什么。

整个文件：

import React, { Component } from 'react';
import { sortOffers } from '../../redux/actions/sortActions.js';
import { setVisibilityFilter } from '../../redux/actions/browser';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import PaginationField from './PaginationField';
import { Link } from 'react-router';
import SorterForm from './SorterForm';
import selectForm from './selectForm';

class Sorter extends Component {
  constructor() {
    super();
    this.state = {
      selectedField: '',
    };
  }

  submitSort(values) {
    this.props.sortOffers(values, () => {
      this.props.filter(this.props.filterOption);
    });
  }

  filterChoice(event) {
    this.setState({
      selectedField: event.target.value,
    });
  }

  render() {
    const { handleSubmit, pristine, reset, submitting } = this.props;
    return (
      <div style={{ margin: '100px 20px 0px 20px' }}>
        <form
          onSubmit={handleSubmit(this.submitSort.bind(this))}
          style={{
            width: '100%',
            border: '1px solid #333',
            background: '#f9f9f9',
            padding: 16,
            margin: 16,
          }}
        >
          <Field onChange={this.filterChoice.bind(this)} name="selectForm" component={selectForm} />
          <SorterForm selectedField={this.state.selectedField} />
          <button type="submit">Submit</button>
          <button type="button" onClick={reset}>
            Clear
          </button>
        </form>
        {/* {this.renderItems()} */}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    itemSorted: state.sorter.list,
    offersFiltered: state.sorter.filter,
    filterOption: state.sorter.option,
  };
}

const dispatchToProps = dispatch => ({
  sortOffers: offers => dispatch(sortOffers(offers)),
  filter: options => dispatch(setVisibilityFilter(options)),
});

export default connect(mapStateToProps, dispatchToProps)(
  reduxForm({
    form: 'sorter',
  })(Sorter),
);

Answer 1

根据你的代码 sortOffers签名表示期待一个名为offers的参数，这就是为什么它在您的操作中未定义的原因。

sortOffers: offers => dispatch(sortOffers(offers))

如果你想保持Callback风格，你可以抓住参数并将其传递下去：

sortOffers: (offers, cb) => dispatch(sortOffers(offers, cb))

但我强烈建议您遵循 GProst 建议：承诺链。

正如您现在返回的Axios承诺，您现在可以像这样使用它：

submitSort(values) {
  this.props.sortOffers(values)
  .then(() => {
    this.props.filter(this.props.filterOption);
  });
}

Answer 2

首先，在您的操作中，您必须返回axios创建的承诺：

return (dispatch) => {
  return axios
    .get('/API/offers/sort', {
...

然后在你的组件中你可以链接这个承诺：

submitSort(values) {
  this.props.sortOffers(values)
    .then(() => {
      this.props.filter(this.props.filterOption);
    })
}

第二个值在redux / react中的回复中未定义

2 个答案: