Question

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

部分代码

@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>
    );
  }
}

我想知道为什么这个简单的流程不起作用，我的减速器中的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。

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

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

正在进行的示例工作here。

与redux thunk的redux异步不能与@connect一起使用

2 个答案: