reactjs - React Redux,如何处理表单项的创建和重定向?
问题描述
我是 React(和 Redux)的新手,并尝试制作一个简单的表单来创建和Item ( name, type
),并在创建后重定向到ListIems页面。
我正在使用 react-thunk 来处理异步操作,并且一切都在打字稿中。
我的问题是如何处理创建结果和重定向?由于我的操作CreateItemRequest
是异步的,我如何通知我的容器项目已成功创建,以便它重定向到ListIems页面。
我试图在我CreateItemSuccess
的减速器操作中简单地使用布尔值,但是,我不能去创建表单本身,因为布尔值现在是模型,然后立即重定向到ListIems页面。
我被困在这里,我确定我错过了一些愚蠢的东西,但在任何地方都找不到任何东西......
我的组件:
import { Route, Redirect } from "react-router-dom";
import { connect, Dispatch } from 'react-redux';
import * as React from 'react';
import * as Types from '../../types';
import * as Actions from '../../actions';
interface ICreateModelDispatchProps {
LoadItems: () => void;
ChangeForm: (model: Actions.IItemCreateModel) => void;
CreateItem: (model: Actions.IItemCreateModel) => void;
}
interface ICreateItemStateProps {
Types: Types.ITypeEntity[];
ItemCreated: boolean;
Model: Actions.IItemCreateModel;
}
class CreateItem extends React.Component<ICreateItemStateProps & ICreateModelDispatchProps, Types.IAppState> {
public componentDidMount() {
this.props.LoadItems();
}
public render() {
if (this.props.ItemCreated) {
const redirect = () => <Redirect to={{ pathname: '/items' }} />;
return <Route render={redirect} />;
}
if (!this.props.Types.length) {
return <div id="create-item" className="loading" />;
}
const { Name, Type } = this.props.Model;
const onSubmit = this.onSubmit.bind(this);
const onNameChange = this.onNameChange.bind(this);
const onTypeChange = this.onTypeChange.bind(this);
return (
<div id="create-item">
<form onSubmit={onSubmit}>
<div>
<label htmlFor="name">Name</label>
<input type="text" id="name" value={Name} placeholder="Item's Name" onChange={onNameChange} />
</div>
<div>
<label htmlFor="type">Type</label>
<select id="type" onChange={onTypeChange} value={Type}>
<option value="-1">Choose a type</option>
{this.props.Types.map(type => <option key={type.Id} value={type.Id}>{type.Name}</option>)}
</select>
</div>
<div>
<input type="submit" value="CREATE" />
</div>
</form>
</div>
)
}
private onNameChange(event: React.ChangeEvent<HTMLInputElement>) {
this.props.ChangeForm(Object.assign(this.props.Model, { Name: event.target.value }));
}
private onTypeChange(event: React.ChangeEvent<HTMLSelectElement>) {
this.props.ChangeForm(Object.assign(this.props.Model, { Type: event.target.value }));
}
private onSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
this.props.CreateItem(this.props.Model);
}
}
export function mapStateToProps(state: Types.IAppState): ICreateItemStateProps {
const types = Object.keys(state.Entities.Types).map(key => state.Entities.Types[Number(key)]);
const Model = state.CreateItem;
return {
Model,
Types: types,
ItemCreated: !!state.CreateItem.Created,
};
}
export function mapDispatchToProps(dispatch: Dispatch): ICreateModelDispatchProps {
return {
LoadItems: () => dispatch(Actions.ITEM_TYPES_REQUEST()),
ChangeForm: (model) => dispatch(Actions.ITEM_CREATE_CHANGE(model)),
CreateItem: (model) => dispatch(Actions.ITEM_CREATE_REQUEST(model)),
};
}
export default connect(mapStateToProps, mapDispatchToProps)(CreateItem);
解决方案
Promise
您可以使用或编写您的操作async/await
。这是js中的示例(不是ts)
export default function ITEM_CREATE_REQUEST(model) {
return (dispatch) => {
return new Promise((resolve, reject) => {
/* SOME STUFF */
resolve(SOME_DATA);
});
}
};
比您在解决时可以使用它来导航
onSubmit() {
event.preventDefault();
this.props.CreateItem(this.props.Model).then((SOME_DATA) => {
/* PERFORM REDIRECT */
});
}
推荐阅读
- domain-driven-design - 在 Spine 事件引擎的聚合中应用拒绝
- angular - 如何在模板中显示来自管道的数据?
- javascript - 如何防止电子商务购物车中的产品以 2 为单位递增?
- ide - Geany 是否提供自动完成功能而无需每次都按 Ctrl-Space?
- amazon-web-services - 如何为 AWS 中的实例类正确创建安全组?
- spring - Spring JPA AuditorAware 对于服务中的嵌套调用为空
- java - Spring不返回默认验证错误响应
- javascript - 添加删除按钮
- c++ - C++:帕斯卡三角
- python - PIL 文本旋转 (discord.py)