核心特性
Redux 的设计哲学和关键技术特性
单一数据源
整个应用的状态存储在一个单一的store中。状态树清晰，便于调试和状态管理。
状态只读
状态只能通过dispatch action来修改。保证状态变化可追踪，可预测。
纯函数更新
使用纯函数(reducer)来描述状态变化。相同输入总是产生相同输出，易于测试。
可预测性
状态变化可预测，支持时间旅行调试。可回放状态变化，方便调试。
生态系统
围绕 Redux 构建的完整工具链
React-Redux
React官方绑定库。提供useSelector、useDispatch等Hook，简化React组件与Redux的连接。
Redux Toolkit
官方推荐的Redux工具集。简化Redux开发，减少模板代码，提供最佳实践。
Redux DevTools
强大的浏览器扩展。支持时间旅行调试、状态快照、action回放等。
中间件
支持Redux Thunk、Redux Saga等中间件。处理异步操作、副作用等复杂场景。
RTK Query
Redux Toolkit内置的数据获取和缓存工具。类似TanStack Query，与Redux深度集成。
TypeScript支持
完整的TypeScript支持。类型安全的state、action、selector。
快速入门
# 安装Redux
npm install @reduxjs/toolkit react-redux
# 创建Store
// store.js
import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./counterSlice";
export const store = configureStore({
reducer: {
counter: counterReducer
}
});
# 创建Slice
// counterSlice.js
import { createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
name: "counter",
initialState: { value: 0 },
reducers: {
increment: state => { state.value += 1 },
decrement: state => { state.value -= 1 },
incrementByAmount: (state, action) => {
state.value += action.payload;
}
}
});
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;
# 在React中使用
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./counterSlice";
function Counter() {
const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(decrement())}>-</button>
<span>{count}</span>
<button onClick={() => dispatch(increment())}>+</button>
</div>
);
}配置示例
// store.js - 完整配置
import { configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query";
import counterReducer from "./counterSlice";
import usersReducer from "./usersSlice";
import { usersApi } from "./services/users";
export const store = configureStore({
reducer: {
counter: counterReducer,
users: usersReducer,
[usersApi.reducerPath]: usersApi.reducer
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(usersApi.middleware),
devTools: process.env.NODE_ENV !== "production"
});
setupListeners(store.dispatch);
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;学习资源
与其他状态管理库对比
vs Zustand
Redux更规范，适合大型项目。Zustand更简单，适合中小型项目，学习成本低。
vs MobX
Redux可预测性强，适合需要严格状态管理的场景。MobX更灵活，适合复杂对象。
vs Jotai
Redux集中式状态管理。Jotai原子化状态管理，适合细粒度状态控制。