在我的react项目中,我有redux-toolkit
用于状态管理,我使用一个中间件函数在发送到reducer之前对有效负载进行更改。在中间件文件中,我正在执行一个API调用,将文本更改为ES,但由于Api中的错误,该中间件函数进入了无限循环。你可以在下面的代码片段中看到中间件函数和API调用代码。
import { getSpanishText } from "../../helpers/storeSpanishText";
export const kioskSettingsMiddleware = (store) => (next) => async (action) => {
const actionType = action.type;
if (actionType === "kisokSettings/saveKioskPortalSettings") {
const prevState = store.getState().kioskSettings;
const data = action.payload;
let settingObject = {
autoDisconnect: data.auto_hang_up_call,
multiPMS: data?.is_multi_pms_mapping,
};
if (
data?.is_complete_operation_message &&
data?.complete_operation_message !== prevState?.completeMessage
) {
settingObject["completeMessage"] = data?.complete_operation_message;
settingObject["EScompleteMessage"] = await getSpanishText(
"EScompleteMessage",
data?.complete_operation_message
);
}
return store.dispatch({ type: actionType, payload: settingObject });
}
return next(action);
}
下面是API调用代码
export const getSpanishText = (key, msg) => {
return axios
.get(`https://translation.googleapis.com/language/translate/v2`, {
params: {
key: TRANSLATE_API_KEY,
q: msg,
target: "es",
},
})
.then((res) => {
if (res.status === 200) {
ipcRenderer.send("logs", {
type: "info",
msg: `ES TRANSLATION- [${key} : ${res.data.data.translations[0].translatedText}]`,
});
return res.data.data.translations[0].translatedText;
}
})
.catch((err) => {
ipcRenderer.send("logs", {
type: "info",
msg: `FALLBACK EN - [${key} : ${msg}]`,
});
return msg;
});
};
1条答案
按热度按时间syqv5f0l1#
你的
使用相同的操作类型启动一个新的分派-因此它将再次运行到相同的中间件中。
也许你想打电话
而不是