redux 状态看似未更新，实则是表单默认提交行为触发了页面重载，使 react 应用重新初始化、redux store 恢复初始状态；解决关键在于阻止表单默认提交并正确绑定事件处理器。
redux 状态看似未更新，实则是表单默认提交行为触发了页面重载，使 react 应用重新初始化、redux store 恢复初始状态；解决关键在于阻止表单默认提交并正确绑定事件处理器。
在使用 Redux Toolkit 构建 React 应用时，一个高频却隐蔽的问题是：useDispatch 调用成功、reducer 中 console.log 正常输出、新数据也确实被 push 到 state，但组件中通过 useSelector 获取的状态却始终“不更新”——新增的帖子从未出现在 <postlist></postlist> 中。根本原因并非 Redux 本身失效，而是 表单提交触发了浏览器默认行为：页面整页刷新。
HTML 表单（<form></form>）在遇到 <button></button>（无 type 属性时默认为 type="submit"）被点击时，会自动提交并重载当前页面。这会导致整个 React 应用被卸载后重建，所有内存中的状态（包括 Redux store）均恢复为 initialState。因此，尽管 postAdded reducer 在刷新前已执行，但刷新后你看到的是全新的、未添加任何新项的初始 state。
✅ 正确做法是：
-
将
onSubmit事件处理器绑定到<form></form>元素上（而非外层<section></section>）； -
在事件处理器中调用
event.preventDefault()，明确阻止默认提交行为； -
显式声明
<button type="submit"></button>，增强可读性与健壮性。
修正后的 AddPostForm.js 如下：
import { useDispatch } from 'react-redux';
import { useState } from 'react';
import { postAdded } from './features/posts/postSlice';
function AddPostForm() {
const dispatch = useDispatch();
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const onSubmit = (event) => {
event.preventDefault(); // ✅ 关键：阻止页面刷新
if (title.trim() && content.trim()) {
dispatch(postAdded({ title, content })); // id 将在 prepare 中自动生成
setTitle('');
setContent('');
}
};
return (
<section>
<h2>Add New Post</h2>
<form onSubmit={onSubmit}>
<label htmlFor="title">Post Title:</label>
<input
type="text"
id="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<label htmlFor="content">Content:</label>
<textarea
id="content"
value={content}
onChange={(e) => setContent(e.target.value)}
/>
<button type="submit">Save Post</button>
</form>
</section>
);
}
export default AddPostForm;此外，推荐优化 postSlice.js 中的 postAdded action，利用 Redux Toolkit 的 prepare callback 自动注入 id，避免在组件中重复引入 nanoid：
// features/posts/postSlice.js
import { createSlice, nanoid } from '@reduxjs/toolkit';
const initialState = [
{ id: 1, title: 'Learning Redux Toolkit', content: 'I have heard good things.' },
{ id: 2, title: 'Slices...', content: 'The more I say slice, the more I want pizza.' }
];
const postsSlice = createSlice({
name: 'posts',
initialState,
reducers: {
postAdded: {
reducer: (state, action) => {
state.push(action.payload); // ✅ immer 支持直接 mutation
},
prepare: ({ title, content }) => ({
payload: {
id: nanoid(),
title,
content
}
})
}
}
});
export const selectAllPosts = (state) => state.posts;
export const { postAdded } = postsSlice.actions;
export default postsSlice.reducer;⚠️ 注意事项：
- 不要将
onSubmit绑定在非表单元素（如<section></section>）上，否则无法捕获原生表单提交事件； - 即使使用了
useState，若页面刷新，所有本地状态也会丢失——preventDefault()是防止状态丢失的第一道防线； - Redux Toolkit 的
createSlice内部基于 Immer，允许在 reducer 中安全地“修改”state（如push），无需手动返回新数组。
总结：Redux 状态“不更新”，90% 的情况不是 Redux 的问题，而是 UI 交互逻辑未阻止浏览器默认行为。养成 event.preventDefault() 的习惯，并确保事件绑定位置准确，是构建可靠 React + Redux 应用的基本功。
