英文:
How to use same rejected in same slice in redux toolkit
问题
我有这些额外的reducer:
extraReducers: builder => {
builder.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
if (action.payload.status === 200) {
state.error = '';
state.userTopics.responsableTopics.push(...action.payload.data);
} else {
state.error = action.payload.data;
}
});
builder.addCase(getTopicsByDcResponsable.rejected, (state, action) => {
state.error = action.payload;
});
builder.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
if (action.payload.status === 200) {
state.error = '';
state.userTopics.editorTopics.push(...action.payload.data);
} else {
state.error = action.payload.data;
}
});
builder.addCase(getTopicsbyDcentroEdit.rejected, (state, action) => {
state.error = action.payload;
});
},
所有被拒绝的情况都会收到相同的错误消息,即后端出现错误时为'Network Error'。
在Redux Toolkit中,您可以为所有错误使用相同的拒绝处理程序。
英文:
I have this extrareducers:
extraReducers: builder => {
builder.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
if(action.payload.status === 200){
state.error = '';
state.userTopics.responsableTopics.push(...action.payload.data);
} else {
state.error = action.payload.data;
}
});
builder.addCase(getTopicsByDcResponsable.rejected, (state, action) => {
state.error = action.payload;
});
builder.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
if(action.payload.status === 200){
state.error = '';
state.userTopics.editorTopics.push(...action.payload.data);
} else {
state.error = action.payload.data;
}
});
builder.addCase(getTopicsbyDcentroEdit.rejected, (state, action) => {
state.error = action.payload;
});
},
All the rejected recieve the same message in case that the backend has an error 'Network Error'.
In redux you can use the same reducer for all the errors.
How can i use the same rejected in redux Toolkit if all recieve the same error?
Thanks
答案1
得分: 1
以下是翻译好的代码部分:
You can define a single error handler function and pass it to the `builder.addMatcher` method.
Something like this should prevent redundancy.
const handleRejected = (state, action) => {
state.error = action.error.message === "Network Error" ? "Network Error" : "Unexpected Error";
};
extraReducers: builder => {
builder
.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
if (action.payload.status === 200) {
state.error = '';
state.userTopics.responsableTopics.push(...action.payload.data);
} else {
state.error = action.payload.data;
}
})
.addMatcher(
action => action.type.endsWith("/rejected"),
handleRejected
)
.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
if (action.payload.status === 200) {
state.error = '';
state.userTopics.editorTopics.push(...action.payload.data);
} else {
state.error = action.payload.data;
}
})
.addMatcher(
action => action.type.endsWith("/rejected"),
handleRejected
);
},
Edit: You can try this if you want to remove additional `.addMatcher`
const isRejected = action => action.type.endsWith("/rejected");
builder
.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
// Handle fulfilled action for getTopicsByDcResponsable
})
.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
// Handle fulfilled action for getTopicsbyDcentroEdit
})
.addMatcher(isRejected, (state, action) => {
// Handle all rejected actions
state.error = action.error.message === "Network Error" ? "Network Error" : "Unexpected Error";
});
英文:
You can define a single error handler function and pass it to the builder.addMatcher
method.
Something like this should prevent redundancy.
const handleRejected = (state, action) => {
state.error = action.error.message === "Network Error" ? "Network Error" : "Unexpected Error";
};
extraReducers: builder => {
builder
.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
if (action.payload.status === 200) {
state.error = '';
state.userTopics.responsableTopics.push(...action.payload.data);
} else {
state.error = action.payload.data;
}
})
.addMatcher(
action => action.type.endsWith("/rejected"),
handleRejected
)
.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
if (action.payload.status === 200) {
state.error = '';
state.userTopics.editorTopics.push(...action.payload.data);
} else {
state.error = action.payload.data;
}
})
.addMatcher(
action => action.type.endsWith("/rejected"),
handleRejected
);
},
Edit: You can try this if you want to remove additional .addMatcher
const isRejected = action => action.type.endsWith("/rejected");
builder
.addCase(getTopicsByDcResponsable.fulfilled, (state, action) => {
// Handle fulfilled action for getTopicsByDcResponsable
})
.addCase(getTopicsbyDcentroEdit.fulfilled, (state, action) => {
// Handle fulfilled action for getTopicsbyDcentroEdit
})
.addMatcher(isRejected, (state, action) => {
// Handle all rejected actions
state.error = action.error.message === "Network Error" ? "Network Error" : "Unexpected Error";
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论