我写了一个电话簿应用程序来学习redux有两个主要状态:电话簿和编辑模式下的电话簿。因此,当用户完成编辑时,我将验证编辑对象上的值并更新原始对象。
我遇到一个问题,我需要在使用新用户输入更新状态后发送批准调度功能。我试图在mapDispatchtoProps中创建另一个函数,并从ownProps.func()调用它,但它似乎无法识别它。如果我将验证放在批准编辑功能中,则不使用更新状态。
所以我最终写了类似的东西:
const isEditApprove = (dispach, ownProps) => {
let EditApprove = true;
if (!ownProps.phone || ownProps.phone.length > 12 || ownProps.phone.length < 9) {
dispach(rejectEdit(ownProps.id, 'phone')); // change it to const
EditApprove = false;
}
if (!ownProps.name || ownProps.name.trim().indexOf(' ') === -1) {
dispach(rejectEdit(ownProps.id, 'name')); // change it to const
EditApprove = false;
}
return EditApprove;
};
const mapStateToProps = () => ({});
const mapDispatchtoProps = (dispach, ownProps) => ({
addUserHandler() {
if (isEditApprove(dispach, ownProps)) {
dispach(toggleAddUserMode(ownProps.addUserMode));
}
},
editUserHandler(event) {
dispach(changeUserInfo(ownProps.id, event.target.name, event.target.value));
},
approveEditHandler() {
if (isEditApprove(dispach, ownProps)) {
dispach(approveEdit(ownProps.id, ownProps.phone, ownProps.name));
dispach(toggleEditMode(ownProps.id, ownProps.name, ownProps.phone, ownProps.editMode));
}
},
它正在工作,但我觉得有一个更好的方法,然后我的isEditApprove功能。我是否需要使用异步中间件(即使我没有调用任何服务器)?
谢谢, 或
编辑:
添加了我的操作:
export function toggleEditMode(id, name, phone, editMode) {
return {
type: TOGGLE_EDIT_MODE,
payload: {
name,
phone,
id,
editMode: !editMode,
},
};
}
export function approveEdit(id, phone, name) {
return { type: APPROVE_EDIT, payload: { id, phone, name } };
}
export function rejectEdit(id, errorType) {
let errorMessage;
switch (errorType) {
case 'phone':
errorMessage = 'The phone number must be between';
break;
case 'name':
errorMessage = 'TThe name must contain two words';
break;
default:
errorMessage = 'Unknown error';
}
return { type: REJECT_EDIT, payload: { id, errorType, errorMessage } };
}