Redux是JavaScript中成熟的状态管理库，核心遵循单一数据源、状态只读、纯函数更新三原则；现代开发推荐使用Redux Toolkit简化流程，适用于多组件共享状态、逻辑复杂或需调试回溯的场景。
状态管理，简单说就是统一管好应用里所有“会变的数据”——比如用户是否登录、购物车里有几件商品、列表正在加载还是出错了。这些数据叫“状态（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 功能：
立即学习“Java免费学习笔记（深入）”；
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.actionsexport 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}
)}
什么时候真该用 Redux？
别一上来就上。它适合：
多个组件频繁共享同一份状态（比如登录态、主题色、权限信息）状态变化逻辑复杂，需要可预测、可回溯（比如时间旅行调试）团队协作项目，需要明确状态流转规范
如果只是单个组件内部状态，或父子组件传几层 props 就能解决，用 useState 或 useReducer 更轻量。
基本上就这些。Redux 不复杂，但容易忽略“为什么需要它”这个前提。
以上就是什么是状态管理_javascript中redux怎么用？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1542934.html
微信扫一扫 
支付宝扫一扫 
