I have a very weird problem. I have the same solution for all my slices and it doesn't work only for projects. The console.log first returns a new object, but then somehow old. I will show you the code and then images of console.log.
The edit action
.addCase(
editProject.fulfilled,
(state: ProjectState, action: PayloadAction<Project>) => {
state.all = state.all.map((project) => project._id === action.payload._id ? action.payload : project)
state.isLoading = false;
state.hasError = false;
}
)
ProjectShow component
const ProjectsShow: React.FC = () => {
const { projectLink } = useParams();
const dispatch = useAppDispatch();
const { isLoading, hasError, errMessage } = useAppSelector((state) => state.projects);
useEffect(() => {
dispatch(loadProjects());
}, [dispatch]) ;
const projects = useSelector(selectAllProjects);
if(isLoading) {
return (
<Loading />
)
}
if(hasError) {
return <Error message={errMessage!} />;
}
const project = projects.find(({ subpageLink }) => subpageLink === projectLink);
console.log(project)
return (
<div className="row">
<div className="col-lg-12">
<Project project={project!} />
</div>
</div>
)
}
Console logs
