带有 redux thunk 的 redux async 不适用于 @connect

Question

我尝试使用 setTimeout 作为 rest api 的模拟，但我的 redux 似乎有缺陷。

https://codesandbox.io/s/1zr78rp48j

部分代码

@connect(state => state.items, { approveItem })
export default class Items extends Component {
  render() {
    return (
      <div>
        <div>status: {this.props.item.status}</div>
        <button onClick={() => approveItem()}>{this.props.loading ? 'loading...' : 'Approve'}</button>
      </div>
    );
  }
}

我想知道为什么这个简单的流程不起作用，我在 reducer 中的 setTimeout 函数有意义吗？我正在使用 redux-thunk。

Answer 1

我已经更正了你的代码，看看

https://codesandbox.io/s/14j6m2661q

问题出在你的课堂上

export  class Items extends Component {
  render() {
    console.log(approveItem);
    return (
      <div>
        <div>status: {this.props.items && this.props.items.item.status}</div>
        <button onClick={() => this.props.approveItem()}>Approve </button>
      </div>
    );
  }
}

// start of code change
const mapStateToProps = (state) => {
  return { items: state.items };
};
const mapDispatchToProps = (dispatch) => {

  return {
    approveItem: () => dispatch(approveItem())
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Items);

Answer 2

如果您希望 redux 获取动作创建者并将它们包装在一个函数中，该函数将分派其结果，您必须将动作创建者 pass an object 作为 mapDispatchToProps 的成员（您这样做是正确的）。

但是在组件中你没有使用包装的动作创建器，你使用的是导入的approveItem 创建自动调度动作创建器的正确代码是：

import React, { Component } from "react";
import { connect } from "react-redux";
import { approveItem } from "./actions";
//mapDispatchToProps is an object here, all function members of the object
//  will be treated as action creators and wrapped in a function that when
//  called will automatically dispatch their result
const mapDispatchToProps = { approveItem };
@connect(state => state.items, mapDispatchToProps)
export default class Items extends Component {
  render() {
    //use the wrapped action creator found on this.props
    console.log(this.props.approveItem);
    return (
      <div>
        <div>status: {this.props.item.status}</div>
        <button onClick={() => this.props.approveItem()}>Approve </button>
      </div>
    );
  }
}

您可以手动将动作创建者包装在一个函数中，该函数将分派其结果（动作）。通过将函数传递给 mapDispatchToProps。

当您想要隔离组件并且不将所有减速器和操作都倾倒在一堆时，通常会出现这种情况。该应用程序将在{type:"ITEM",action:actualItemComponentAction} 中包装操作。由于组件不知道如何将其动作包装在应用程序处理的动作中，因此应用程序需要将包装器传递给动作创建者，这些创建者返回用于 thunk 的函数并使用应用程序减速器可以处理的类型包装实际动作对象。

不确定bindActionCreators 是如何适应这一点的，因为如果您想手动将动作创建者绑定到组件，您通常不想自动绑定它们，而是希望将组件动作包装在应用程序动作中。

可以在here找到一个正在进行的示例。