Redux在JavaScript中如何使用？

Redux是JavaScript中成熟可靠的状态管理方案，它通过单一数据源、状态不可变和纯函数更新三大原则，帮助开发者清晰、可预测地管理应用中那些“会变的数据”（如登录状态、购物车数量、加载状态等）；现代开发强烈推荐使用更简洁高效的Redux Toolkit，大幅减少样板代码，配合React快速构建可调试、易协作、逻辑复杂的应用；但需理性选择——当多组件频繁共享状态、需要时间旅行调试或团队规范状态流时它才真正大显身手，而简单场景下useState往往更轻量直接。

状态管理，简单说就是统一管好应用里所有“会变的数据”——比如用户是否登录、购物车里有几件商品、列表正在加载还是出错了。这些数据叫“状态（state）”，散落在各个组件里容易混乱、难同步、难调试。Redux 就是 JavaScript 中一个成熟的状态管理库，它不绑定 React，但和 React 配合最常见。

Redux 的核心思路很清晰

它坚持三件事：

• 单一数据源：整个应用只有一个 store，所有状态都存在这棵树里
• 状态只读：你不能直接改 state，必须发一个 action（比如 { type: 'LOGIN_SUCCESS', user: {...} }）告诉 store “我要变”
• 纯函数更新：reducer 接收旧 state 和 action，返回新 state，不改原对象，不带副作用

用 Redux 的基本步骤（以现代写法为主）

现在推荐用 Redux Toolkit（RTK），它大幅简化了传统 Redux 的样板代码，官方也默认推荐。

• 装依赖：npm install @reduxjs/toolkit react-redux
• 建 store：用 configureStore 创建，自动集成 DevTools 和 thunk 等中间件
• 写 slice：每个业务模块（如用户、订单）用 createSlice 定义初始状态、reducer 函数和自动生成的 action creators
• 在组件中用：用 useSelector 读状态，用 useDispatch 派发 action

一个计数器的最小完整例子

比如实现 +1 / -1 功能：

• slice 文件（features/counter/counterSlice.js）：

import { createSlice } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: state => state + 1,
decrement: state => state - 1,
}
})
export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer

• store（app/store.js）：

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'
export const store = configureStore({
reducer: {
counter: counterReducer,
}
})

• 组件中使用（Counter.jsx）：

import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from '../features/counter/counterSlice'
function Counter() {
const count = useSelector(state => state.counter)
const dispatch = useDispatch()
return (
{count}
 dispatch(increment())}>+ dispatch(decrement())}>−
  )
}

什么时候真该用 Redux？

别一上来就上。它适合：

• 多个组件频繁共享同一份状态（比如登录态、主题色、权限信息）
• 状态变化逻辑复杂，需要可预测、可回溯（比如时间旅行调试）
• 团队协作项目，需要明确状态流转规范

如果只是单个组件内部状态，或父子组件传几层 props 就能解决，用 useState 或 useReducer 更轻量。

基本上就这些。Redux 不复杂，但容易忽略“为什么需要它”这个前提。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Redux在JavaScript中如何使用？》文章吧，也可关注golang学习网公众号了解相关技术文章。