文章目录
Redux 是 JavaScript 生态最流行的可预测状态管理库，GitHub 星标超过 6 万，配合 React 用得最多，别的框架也能用，做大型项目状态管理真的靠谱。
我用 Redux 做过好几个大型 React 项目，聊聊它解决什么问题，新手值得学吗，什么时候用它合适。
Redux 解决了什么问题
React 做大型项目，组件多了，状态传来传去太麻烦，props 要一层一层传，很多组件共享一个状态，改起来到处都是，乱。Redux 把所有状态放一个容器，哪个组件要用直接拿，改的时候统一改，数据流向清晰，不容易乱。
所有状态修改都是纯函数，可预测，你改之前是什么，改了之后是什么，日志都能记，回滚也方便，调试方便，时间旅行调试真的很爽，改出问题一步一步看。
中间件机制，你想加日志，加异步请求，加路由同步，插中间件就行，扩展方便，想要什么功能加什么。
基础例子看一下
安装创建：
bash
npm install redux react-redux写个简单计数器：
javascript
// store/counter.js
// reducer
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case 'counter/incremented':
return { ...state, value: state.value + 1 }
case 'counter/decremented':
return { ...state, value: state.value - 1 }
default:
return state
}
}
export default counterReducer
javascript
// store/index.js
import { createStore, combineReducers } from 'redux'
import counterReducer from './counter'
const rootReducer = combineReducers({
counter: counterReducer
})
const store = createStore(rootReducer)
export default store在 React 里用：
jsx
// App.jsx
import { useSelector, useDispatch } from 'react-redux'
import { Provider } from 'react-redux'
import store from './store'
function Counter() {
const count = useSelector(state => state.counter.value)
const dispatch = useDispatch()
return (
<div>
<button onClick={() => dispatch({ type: 'counter/decremented' })}>-</button>
<span>{count}</span>
<button onClick={() => dispatch({ type: 'counter/incremented' })}>+</button>
</div>
)
}
export default function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
)
}就是这么简单，状态存在 store 里，组件用 useSelector 拿，改状态发 action，reducer 算新状态，数据流向清晰。
现在用 Redux Toolkit 更简洁，官方推荐写法：
javascript
// counterSlice.js
import { createSlice } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
incremented: state => {
state.value += 1
},
decremented: state => {
state.value -= 1
}
}
})
export const { incremented, decremented } = counterSlice.actions
export default counterSlice.reducerImmer 帮你处理不可变更新，你直接改状态就行，不用自己写展开运算符，简洁很多。
核心好用的特性
单一数据源
整个应用所有状态存在一个 store 里，方便调试，方便服务端渲染，状态好拿，哪里要用哪里取，不用传来传去。
状态只读
不能直接改状态，只能发 action，所有修改都集中走一遍，谁改了什么时候改的，都能追踪，不容易出莫名其妙的bug。
纯函数修改
reducer 是纯函数，相同输入一定相同输出，没有副作用，好测试，好理解，结果可预测。
中间件扩展
中间件拦截 action，可以做日志、异步处理、路由同步，想要什么功能插进去就行，Redux 本身核心很小，扩展灵活。
开发者工具
Redux DevTools 太好用了，看每一步 action 改了什么，时间旅行，回到之前的状态调试，出问题一步一步看，定位bug 特别快。
哪些场景用 Redux
大型 React 项目，很多组件共享状态，用 Redux 最合适，数据流向清晰，项目大了好维护，每个人都按规则改状态，不容易乱。
中大型项目，需要调试，需要回滚，Redux 开发工具帮你省好多时间，出问题好定位。需要做 undo/redo 功能，Redux 天生支持，特别好做。
团队协作开发，大家都按 Redux 规则来，状态修改统一，代码风格一致，维护方便，新人接手也容易懂。
Redux 有哪些优缺点
优点太明显，架构清晰，数据流向统一，大型项目好维护，时间旅行调试真的省好多时间，生态完善，什么中间件都有，异步用 redux-thunk 还是 redux-saga 你自己选，灵活性够。
缺点也有，概念多，入门要学 reducer、action、store、中间件，新手一下子理解不了，写简单项目样板代码多，有点重。现在 React 有 Context useReducer，简单场景不用 Redux 也能搞定，Redux 适合中大型项目，小项目用不上。
官方现在推 Redux Toolkit，简化了很多，样板代码少了很多，比以前好用多了。
现在 Redux 发展得怎么样
出来快十年了，一直是 React 生态状态管理的首选，现在 RTK 简化之后，好用很多，用户还是很多，一直稳定更新，RTK Query 还帮你做了数据请求缓存，越来越完善。
虽然现在有 Zustand、Jotai 这些新的状态管理，但 Redux 还是大型项目首选，架构清晰，规则明确，团队合作舒服。招聘市场一直要求会 Redux，做 React 开发基本都要会。
现在学 Redux 值得吗
做 React 中大型开发，肯定值得学，找工作基本都要求会，大型项目真的需要它，规则明确，好维护。学会 Redux 的思想，就算你用别的状态管理，思想也通用。
现在有 Redux Toolkit，写起来简洁很多，入门也比以前容易，跟着官方文档走一遍，很快就能会。小项目其实用不上，但中大型项目，Redux 还是最稳的，这么多年验证过了，坑都踩完了。
就算你不用，理解它单向数据流的思想，对你理解前端状态管理也有帮助，学了没坏处。
项目地址：https://github.com/reduxjs/redux
Toolkit，写起来简洁很多，入门也比以前容易，跟着官方文档走一遍，很快就能会。小项目其实用不上，但中大型项目，Redux 还是最稳的，这么多年验证过了，坑都踩完了。
就算你不用，理解它单向数据流的思想，对你理解前端状态管理也有帮助，学了没坏处。