React / Redux -发送多个修补程序请求onBlur

<input type="text" onBlur={handleBlur} />

// action.js
export const sendPatchRequests = (data) => {
  return (dispatch) => {
    data.forEach((patchData) => {
      // 发送修补程序请求
      // 可以使用fetch或axios等工具发送请求
      dispatch(patchRequest(patchData));
    });
  };
};

const patchRequest = (data) => {
  return {
    type: 'PATCH_REQUEST',
    payload: data,
  };
};

// reducer.js
const initialState = {
  patches: [],
};

const patchReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'PATCH_REQUEST':
      return {
        ...state,
        patches: [...state.patches, action.payload],
      };
    default:
      return state;
  }
};

export default patchReducer;

import { connect } from 'react-redux';
import { sendPatchRequests } from './action';

const MyComponent = (props) => {
  const handleBlur = () => {
    // 准备需要发送的修补程序请求数据
    const patchData = [{}, {}, ...];
    props.sendPatchRequests(patchData);
  };

  return <input type="text" onBlur={handleBlur} />;
};

const mapDispatchToProps = (dispatch) => {
  return {
    sendPatchRequests: (data) => dispatch(sendPatchRequests(data)),
  };
};

export default connect(null, mapDispatchToProps)(MyComponent);