[英]React redux doesn't return current state value
I have a problem with redux thunk in react.我对 redux thunk 有问题。 In the thunk file, I use to dispatch actions and change isSuccess and isLoading flag from the reducer, but in the component, after the API call, I get the previous value of these instead of the current ones.在 thunk 文件中,我使用调度操作并从 reducer 更改 isSuccess 和 isLoading 标志,但在组件中,在 API 调用之后,我得到了这些的先前值而不是当前值。
components.jsx组件.jsx
await addClient(valueToSubmit, employee.tenantId).then((response) => {
if (isSuccess) {
showToast(toastTypes.SUCCESS, translate("client_add_success"));
resetForm();
setSubmitting(false);
toggleModal();
setFieldsWithError([]);
} else {
showToast(
toastTypes.ERROR,
message.debugMessage?.includes("exist")
? translate("client_exist_error")
: translate("client_add_error")
);
setFieldsWithError(message.payload);
}
});
thunk.js thunk.js
export const addClient = (data, tenant) => async (dispatch) => {
const tenantId = tenant?.replace(/['"]+/g, "");
dispatch(requestAddClient());
return await api(
"post",
apiUrl,
data,
tenant ? { "tenant-uuid": tenantId } : {},
false
)
.then((response) => {
return dispatch(receiveAddClient(response.data.payload));
})
.catch((err) => {
return dispatch(errorAddClient(err.response));
});
};
actions.js动作.js
export const requestAddClient = () => {
return {
type: REQUEST_ADD_CLIENT,
};
};
export const receiveAddClient = (client) => {
return {
type: RECEIVE_ADD_CLIENT,
client: client,
};
};
export const errorAddClient = (message) => {
return {
type: ERROR_ADD_CLIENT,
message,
};
};
reducer.js减速器.js
case REQUEST_ADD_CLIENT:
return {
...state,
client: {},
isSuccess: false,
isLoading: true,
};
case RECEIVE_ADD_CLIENT:
return {
...state,
client: action.client,
clients: [...state.clients, action.client],
isSuccess: true,
isLoading: false,
};
case ERROR_ADD_CLIENT:
return {
...state,
client: {},
message: action.message.data,
isSuccess: false,
isLoading: false,
};
and I can't resolve this problem.我无法解决这个问题。 If anybody knows the reason, please tell me.如果有人知道原因,请告诉我。 Thank you in advance!先感谢您!
In addClient thunk you can rethrow in catch在 addClient thunk 中,您可以重新抛出 catch
.catch((err) => {
dispatch(errorAddClient(err.response));
return Promise.reject(err.response.data)
});
In your component you can do:在您的组件中,您可以执行以下操作:
await addClient(valueToSubmit, employee.tenantId).then(
(response) => {
showToast(
toastTypes.SUCCESS,
translate('client_add_success')
);
resetForm();
setSubmitting(false);
toggleModal();
setFieldsWithError([]);
},
(message) => {
//promise was rejected
showToast(
toastTypes.ERROR,
message.debugMessage?.includes('exist')
? translate('client_exist_error')
: translate('client_add_error')
);
setFieldsWithError(message.payload);
}
);
Another (better) way to do it is to use useEffect
checking the status of the request from the state using useSelector
and triggering what needs to be done based on that value.另一种(更好的)方法是使用useEffect
检查来自 state 的请求的状态,使用useSelector
并根据该值触发需要执行的操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.