redux 中单个减速器的加载状态

Question

I have problem using only one loader state for my reducer in redux. The goal is to make sure each different button have 'loading...' before they hit the api, now the problem is all buttons will display 'loading...'

I created a demo for this problem https://codesandbox.io/s/jlq103oq1v

Answer 1

You need to separate loading states, Currently you only have one loading state and you take your decision based on that, but you buttons need to identify if the loading sstate is meant for them or someone else. You can either renaming your loading states to approve_loading and reset_loading and use them like

@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

or structure your reducer differently,

working sandbox for the same