什么是状态管理_javascript中redux怎么用？-js教程-PHP中文网

什么是状态管理_javascript中redux怎么用？

夢幻星辰

发布： 2025-12-16 17:57:07

原创

925人浏览过

Redux是JavaScript中成熟的状态管理库，核心遵循单一数据源、状态只读、纯函数更新三原则；现代开发推荐使用Redux Toolkit简化流程，适用于多组件共享状态、逻辑复杂或需调试回溯的场景。

什么是状态管理_javascript中redux怎么用？

状态管理，简单说就是统一管好应用里所有“会变的数据”——比如用户是否登录、购物车里有几件商品、列表正在加载还是出错了。这些数据叫“状态（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'
<p>const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: state => state + 1,
decrement: state => state - 1,
}
})</p><p>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'
<p>export const store = configureStore({
reducer: {
counter: counterReducer,
}
})

登录后复制

组件中使用（Counter.jsx）：

import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from '../features/counter/counterSlice'
<p>function Counter() {
const count = useSelector(state => state.counter)
const dispatch = useDispatch()</p><p>return (</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2349">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176049839127300.png" alt="Gaga">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2349">Gaga</a>
                            <p>曹越团队开发的AI视频生成工具</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Gaga">
                                <span>1151</span>
                            </div>
                        </div>
                        <a href="/ai/2349" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Gaga">
                        </a>
                    </div>
                <div><p>{count}</p><button onClick={() => dispatch(increment())}>+</button><button onClick={() => dispatch(decrement())}>−</button></div>
  )
}

登录后复制