Redux 状态管理速查表
Redux 是 React 生态最流行的状态管理库,整理核心概念和 Hooks 用法。
返回 编程语言创建 Store 4
createStore(reducer)创建 Redux store
createStore(reducer, initialState)带初始状态
createStore(reducer, enhancer)使用中间件增强
applyMiddleware(thunk, logger)应用中间件
Action 3
{ type: "ADD_TODO", payload: text }Action 对象
function addTodo(text) { return { type: "ADD_TODO", payload: text } }Action Creator
dispatch(addTodo("Learn Redux"))触发 action
Reducer 3
function reducer(state, action) {}Reducer 函数签名
switch (action.type) { case "ADD": return newState }根据 action 类型返回新状态
combineReducers({ users, posts })合并多个 reducer
React Hooks 4
useSelector(state => state.counter)从 store 读取状态
useDispatch()获取 dispatch 函数
const dispatch = useDispatch()触发 action
useStore()获取 store 实例(少用)
Provider 2
<Provider store={store}><App /></Provider>在根组件注入 store
import { Provider } from "react-redux"导入 Provider
💡 提示
- Redux 三大原则:单一数据源、状态只读、纯函数修改状态。
- Reducer 必须是纯函数,不能修改原状态,返回新对象。
- useSelector 会在 store 更新时重新执行,注意性能优化。
- Redux Toolkit (RTK) 是官方推荐的方式,简化了样板代码。
- 中间件如 redux-thunk 处理异步逻辑,redux-logger 打印日志。