redux中单个reducer的加载状态答案

【问题标题】：Loading state for single reducer in reduxredux中单个reducer的加载状态
【发布时间】：2018-02-16 02:16:55
【问题描述】：

我在 redux 中只为我的 reducer 使用一个加载器状态时遇到问题。目标是确保每个不同的按钮在点击 api 之前都有“正在加载...”，现在的问题是所有按钮都会显示“正在加载...”

我为这个问题创建了一个演示 https://codesandbox.io/s/jlq103oq1v

【问题讨论】：

您将不得不为每个获取操作指定不同的 loading 标志。isResetting, isApproving
@Varinder 表示我必须为所有按钮手动操作？

【解决方案1】：

您需要分离加载状态，目前您只有一个加载状态，您可以根据它做出决定，但您的按钮需要确定加载状态是针对他们还是其他人。您可以将加载状态重命名为 approve_loading 和 reset_loading 并像这样使用它们

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

working codesanbox

或者以不同的方式构建你的 reducer，

working sandbox 相同

【讨论】：

无法打开您的密码箱，Cannot read property 'startsWith' of undefined 错误