View is not updating after adding element to MongoDB - reactjs

Question

[SOLVED]
I'm trying to make a small application with Redux/React/Mongo/Typescript and faced a problem, that when I'm adding element to database, I can see new added row in a table but without values in it. But after refreshing the page, values are there.
I think that this is because the array with records immediately refreshes, while new element is not in database yet. I used await/async but it didn't solve this problem. Can anyone help me with this?
Action.ts
export const getAllTeams: ActionCreator<ThunkAction<Promise<any>,
ITeam[],
null,
ITeamGetAllAction
>> = () => {
return async (dispatch: Dispatch) => {
await axios.get('http://localhost:5000/teams/')
.then(res => {
dispatch({
teams: res.data,
type: TeamActionsTypes.GET_ALL,
})
}
);
};
};
export const addTeam: ActionCreator<ThunkAction<Promise<any>,
ITeamAddTeamAction,
ITeam,
ITeamAddTeamAction
>> = (team: ITeam) => {
return async (dispatch: Dispatch) => {
await axios.post('http://localhost:5000/teams/add', team)
.then(res => {
dispatch({
type: TeamActionsTypes.ADD_TEAM,
result: res,
});
})
};
};
Reducer.ts:
export const teamReducer: Reducer<ITeamState, TeamActions> = (
state = initialTeamState,
action,
) => {
switch (action.type) {
case TeamActionsTypes.GET_ALL: {
return {
...state,
teams: action.teams,
};
}
case TeamActionsTypes.ADD_TEAM: {
return{
...state,
teams: [action.result,...state.teams]
}
}
case TeamActionsTypes.GET_ONE: {
return{
...state,
}
}
default:
return state;
}
};
Component.tsx
interface RatingTableProps {
getTeams: () => Promise<TeamActionsTypes.GET_ALL>;
teams: ITeam[];
}
const RatingTable: React.FC<RatingTableProps> = ({
getTeams,
teams
}) => {
useEffect(()=>{
getTeams();
},[]);
return (
<table className="striped">
<thead>
<tr>
<th>Team</th>
<th className="right-align">Clicks</th>
</tr>
</thead>
<tbody>
{teams && teams.map(team => {
return <>
<tr key={team.name}>
<td>{team.name}</td>
<td className="right-align">{team.count}</td>
</tr>
</>
})}
</tbody>
</table>
)
};
const mapStateToProps = (store: IAppState) => {
return {
teams: store.teamState.teams,
};
};
const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, AnyAction>) => {
return {
getTeams: () => dispatch(getAllTeams()),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(RatingTable);
ComponentAdd.tsx
interface RatingFormProps{
addTeam: (team: ITeam) => Promise<TeamActionsTypes.ADD_TEAM>;
}
const RatingForm: React.FC<RatingFormProps> = ({
addTeam
})=> {
const [teamName, setTeamName] = useState<string>('');
const changeHandle = (event: React.ChangeEvent<HTMLInputElement>) => {
setTeamName(event.target.value);
};
const handleSubmit = (event: React.FormEvent) =>{
event.preventDefault();
addTeam({
name: teamName,
count: 0,
});
setTeamName('')
};
return (
<div className="row">
<form onSubmit={handleSubmit}>
<div className="inputField col s6">
<label htmlFor="teamName" className="active">
Name your team:
</label>
<input
onChange={changeHandle}
value={teamName}
type="text"
id="teamName"
placeholder="Best team name ever"
/>
</div>
<div className="col s6">
<button className="btn-large waves-effect waves-light" type="submit" name="action">Submit
</button>
</div>
</form>
</div>
)
};
const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, AnyAction>) => {
return {
addTeam: (team: ITeam) => dispatch(addTeam(team)),
};
};
export default connect(
null,
mapDispatchToProps,
)(RatingForm);
teams.js(Routes)
router.route('/').get(async (req, res) => {
await Team.find()
.then(teams => res.json(teams))
.catch(err => res.status(400).json('Error: ' + err));
});
router.route('/add').post(async (req, res) => {
const name = req.body.name;
const count = 0;
const newTeam = new Team({name, count,});
await newTeam.save()
.then(() => res.json('Team added to database!'))
.catch(err => res.status(400).json('Error: ' + err));
});
How it looks in UI:
before adding new element
after adding new element
If you need any additional information or code, please let me know. Thank you!
UPDATE 1:
Thank to the comment, of course one big error is to return actual object after posting, not a string(Shame on me)
router.route('/add').post(async (req, res) => {
const name = req.body.name;
const count = 0;
const newTeam = new Team({name, count,});
await newTeam.save()
.then((team) => res.json(team))
.catch(err => res.status(400).json('Error: ' + err));
});
UPDATE 2:
OMG this was such a stupid error
The previous update solved an issue, but after I've recieved undefiened value from dipatch and this was because I was returning Promis, but not value.
export const addTeam: ActionCreator<ThunkAction<Promise<any>,
ITeamAddTeamAction,
ITeam,
ITeamAddTeamAction
>> = (team: ITeam) => {
return async (dispatch: Dispatch) => {
await axios.post('http://localhost:5000/teams/add', team)
.then(res => {
dispatch({
type: TeamActionsTypes.ADD_TEAM,
result: res.data, //<- Instead of just res
});
})
};
};
Thanks to everyone, who spent some time on it, stupid errors as always.

Answer 1

You should return the updated team from your back-end API. You can modify your API like this.
router.route('/add').post(async (req, res) => {
const name = req.body.name;
const count = 0;
const newTeam = new Team({name, count,});
await newTeam.save()
.then(team => res.json(team))
.catch(err => res.status(400).json('Error: ' + err));
});
Drop a comment if the problem still persists.