嘿,我在我的react redux项目中有一个表单,因此在提交表单后,我会调用一个操作,该操作会点击api将文档插入到mongodb中,所以我也想每次都更新状态,以便在我提交表单后立即获得状态更新,然后我在下面将它们呈现(作为对象数组)
Form.js
class Form extends Component {
constructor(props) {
super(props);
this.state = {
taskName: "",
taskDescription: "",
};
}
handleSubmit = () => {
this.props.addTask(this.state);
};
render() {
return (
<div className="m-4">
<div className="d-flex justify-content-between align-items-center">
{" "}
<h2 className=" ">Pomodoro Tasks</h2>
<button className="btn btn-primary" onClick={()=>window.location.reload()}>Refresh</button>
</div>
<form>
<div className="form-group ">
<label>Task Name</label>
<input
type="text"
className="form-control"
onChange={(e) => this.setState({ taskName: e.target.value })}
/>
</div>
<div className="form-group">
<label>Task Description</label>
<input
type="text"
className="form-control"
onChange={(e) => this.setState({ taskDescription: e.target.value })}
/>
</div>
</form>
<button type="submit" className="btn btn-primary" onClick={(e) => this.handleSubmit(e)}>
Submit
</button>
////render here the state
</div>
);
}
}
const mapStateToProps = (state) => {
return state
};
export default connect(mapStateToProps, { addTask })(Form);
Actions.js
export const addTask = (details) => {
return async (dispatch ,getState) =>{
axios.post('/add_task', details)
.then(function (response) {
Swal.fire('Tasks Added !')
dispatch({type:POSTDATA,payload:response.data})
})
.catch(function (error) {
Swal.fire('Error in adding to database')
console.log(error);
});
};
};
export const getTask = () => {
return async (dispatch ,getState) =>{
axios.get('/get_task')
.then(function (response) {
dispatch({type:GETDATA,payload:response.data})
})
.catch(function (error) {
console.log(error);
});
};
};
reducer.js
const postPomodoro = (state = [], action) => {
switch (action.type) {
case POSTDATA:
return action.payload; //well this is only returning one object that is inserted at that time i need to
somehow get all the previous data too that are inserted in order to update state with all data and then render it.
default:
return state;
}
};
const getPomodoro = (state = [], action) => {
switch (action.type) {
case GETDATA:
return {...state,tasks:action.payload};
default:
return state;
}
};
我在减速器中尝试过
case POSTDATA:
return {...state,task:action.payload};
但这也使我恢复了最近插入的数据,而不是以前插入的所有数据
您需要合并状态中的数据,而不是覆盖它。在您的reducer中使用传播语法来实现此目标,如下所示
const postPomodoro = (state = [], action) => {
switch (action.type) {
case POSTDATA:
return [...state, action.payload];
default:
return state;
}
};
在reducer中更新状态后,可以使用connect和mapStateToProps在组件中访问它
const Comp = (props) => {
// iterate over props.postTask and render
}
const mapStateProps = (state) => {
return {
postTask: state.postPomodoro
}
}
export default connect(mapStateToProps)(Comp)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句