Javascript 反应加载微调器+重新调整？

UploadImage组件是一个哑组件。它获取要调用的redux操作以进行上载，并获取图像文件路径，该操作在图像启动后将该路径放入相应的缩减器中。在这里，它与两种道具一起使用：

<UploadImage onUpload={this.props.uploadNewArticleImage} image={this.props.newArticleBuffer.image}/>

有几个问题。首先，我从未将“加载”设置回false：我需要在Redux操作完成时以某种方式执行此操作，但我不知道如何执行此操作

---

第二，也是更重要的一点，当用户上传一个图像，然后决定上传另一个文件时，这种方法不起作用。图像将不再为空。

我所拥有的是，在Redux中，我有一个PageState对象，该对象上有各种共享属性，其中之一就是isProcessing。每当有ajax调用时，另一个名为processingCount的属性就会递增，然后isProcessing被设置为processingCount>0

无论何时ajax请求完成或失败，processingCount属性都会递减

然后，您的PageState对象可以在微调器组件中使用，可以连接到按钮以在处理过程中停止或禁用它们，或者您可以在整个应用程序中显示各种加载动画

---

因此，在您的代码中，我将删除所有组件状态，并将其移动到您的Redux存储中。

首先，将UploadImage组件连接到Redux存储

然后，在操作文件中创建一些操作：

// You only need to export and call this action from your component:
export const uploadNewArticleImage = (uploadData) => {
    return (dispatch) => {
        dispatch(uploadNewArticleImageLoading(true));   // set isLoading = true

        fetch('uploadData.url', {
            method: 'POST',
            body: uploadData.data,
            etc...
        })
            .then((response) => dispatch(uploadNewArticleImageLoading(false)))  // response received
            .then((response) => response.JSON())
            .then((jsonObj) => dispatch(uploadNewArticleImageSuccess(jsonObj.image))) // success
            .catch((error) => dispatch(uploadNewArticleImageLoading(false));          // error
    };
};

const uploadNewArticleImageLoading = (isLoading) => {
    return {
        type: "UPLOAD_NEW_ARTICLE_IMAGE_LOADING",
        payload: {
            isLoading: isLoading
        }
    };
};

const uploadNewArticleImageSuccess = (image) => {
    return {
        type: "UPLOAD_NEW_ARTICLE_IMAGE_SUCCESS",
        payload: {
            image: image
        }
    };
};

然后在reducer中，只需处理更新存储的操作

---

这样，每当我们收到服务器的响应，或者在图像上载过程中发生错误时，isLoading就会设置为false。

使用redux thunkI。在您看来，这将如何解决问题？问题是，是否真的有必要为每个单独的组件使用单独的加载布尔值？我宁愿在rootReducer上有一个全局isLoading状态并分派到那里。@tshm001没有必要为每个组件都有一个全局isLoading状态

// You only need to export and call this action from your component:
export const uploadNewArticleImage = (uploadData) => {
    return (dispatch) => {
        dispatch(uploadNewArticleImageLoading(true));   // set isLoading = true

        fetch('uploadData.url', {
            method: 'POST',
            body: uploadData.data,
            etc...
        })
            .then((response) => dispatch(uploadNewArticleImageLoading(false)))  // response received
            .then((response) => response.JSON())
            .then((jsonObj) => dispatch(uploadNewArticleImageSuccess(jsonObj.image))) // success
            .catch((error) => dispatch(uploadNewArticleImageLoading(false));          // error
    };
};

const uploadNewArticleImageLoading = (isLoading) => {
    return {
        type: "UPLOAD_NEW_ARTICLE_IMAGE_LOADING",
        payload: {
            isLoading: isLoading
        }
    };
};

const uploadNewArticleImageSuccess = (image) => {
    return {
        type: "UPLOAD_NEW_ARTICLE_IMAGE_SUCCESS",
        payload: {
            image: image
        }
    };
};