Невозможно обновить данные в наборе инструментов Redux ⇐ Javascript

[Anonymous]

Я создаю CRUD-приложение в Redux Toolkit, в котором есть все упомянутые базовые операции, тогда как операция обновления не работает должным образом. Посмотрите следующий код

• postSlice.js

Код: Выделить всё

export const postSlice = createSlice({
name: "post",
initialState,
reducers: {
update: (state, action) => {
const previousPosts = state.entries.filter(
(entry) => entry.id !== action.payload.id
);

state.entries = [action.payload, ...previousPosts];
},
}

• EditPost.jsx

Код: Выделить всё

const EditPost = () => {
const postId = useParams().id;

const posts = useSelector((state) => state.post.entries);
const selectedPost = posts.find((post) => post.id === postId);
return (

This is Edit Post

);
};

• PostForm.jsx

Код: Выделить всё

const PostForm = ({ selectedPost }) => {
const navigate = useNavigate();
const [formData, setFormData] = useState({
id: selectedPost?.id || "",
name: selectedPost?.name || "",
desc: selectedPost?.desc || "",
author: selectedPost?.author || "",
});

const dispatch = useDispatch();

const handleChange = (e) => {
const { name, value } = e.target;
setFormData({ ...formData, [name]: value });
};

const handleSubmit = (e) => {
e.preventDefault();

if (selectedPost) {
const updatePost = {
id: formData.id,
name: formData.name,
desc: formData.desc,
author: formData.author,
};
dispatch(update(updatePost));
navigate("/");
}

const newPost = {
id: nanoid(),
name: formData.name,
desc: formData.desc,
author: formData.author,
};

dispatch(create(newPost));

setFormData({
name: "",
desc: "",
author: "",
});
};

return (




{selectedPost ? "Update" : "Create"}

);
};

export default PostForm;

Как вы можете видеть на изображении выше, я создал, а затем обновил сообщение, что дало результат 2 раза.
Любое подходящее решение для решения этой проблемы.
Ссылка на Codesandbox для справки: https://codesandbox.io/p/devbox/pedanti ... ess-5x3q52

Подробнее здесь: https://stackoverflow.com/questions/798 ... ux-toolkit