useReducer是React hooks提供的API之一，它和redux的使用几乎一样。因此如果你熟悉redux，那么自然就已经知道如何去使用useReducer了。
1
我用最简单的递增递减的案例，来和大家分享一下它的用法。
最终实现效果如图。
首先从React中引入
代码语言：javascript复制import React, { useReducer } from ‘react’;然后需要定义一个状态值，以表示useReducer维护的数据格式。此时的状态比较简单，只需要指定为一个数字即可。初始化设置为0
在redux中，我们称这样的状态值为Store
代码语言：javascript复制const initialState: number = 0;然后我们需要定义一个Reducer，Reducer是一个函数。在该函数中，我们需要指定状态的改变方式。
代码语言：javascript复制const reduer = (state: number, action: string) => {
switch(action) {
case ‘increment’: return state 1;
case ‘decrement’: return state - 1;
case 'reset': return 0;
default:
return state;
}
}Reducer函数接收两个参数，第一个参数是当前的最新状态值，第二参数则用于告诉Reducer当前执行了什么操作。Reducer会根据不同的操作执行不同的逻辑去修改state。
因此我们称第二个参数为Action。
在这个简单的案例中，Action被我们定义成为一个字符串，reducer内部会根据不同的字符串，执行不同的修改状态逻辑。
Store, Reducer, Action是Redux的三大核心概念，同时也是useReducer的三大核心概念。
三大核心准备好之后，我们就可以定义函数组件，并在其中使用useReducer了。
代码语言：javascript复制export default function Counter() {
const [counter, dispatch] = useReducer(reduer, initialState);
return (
<div style={{ width: ‘200px’, margin: 'auto' }}>
<div style={{ width: '40px’, margin: ‘100px auto’, fontSize: ‘40px’ }}>{counter}</div>
<Button onClick={() => dispatch('increment')}>递增</Button>
<Button onClick={() => dispatch(‘decrement’)}>递减</Button>
<Button onClick={() => dispatch('reset')}>重置</Button>
</div>
);
}从useReducer的返回结果中，我们能够通过解构拿到当前Store的最新值，以及触发器dispatch。
dispatch接收Action作为参数，当dispatch调用时，会将Action告诉Reducer，Reducer通过Action修改Store。一个简单useReducer使用案例就完成了。
2
在实践中，redux的使用并非都是如此简单。反而因为复杂的概念以及较高的维护成本，它的开发体验一直是一个难以解决的痛点。那么redux是如何一步一步变得复杂的呢？
难以维护的Action
上面的例子中，Action非常简单，只是一个字符串。因为我们改变状态只需要递增 1即可。那如果，我们想要增加任意的数额呢？Action就不能只是字符串了。此时Action应该变成如下所示
代码语言：javascript复制dispatch({ type: ‘increment’, payload: 10 })多处使用时
代码语言：javascript复制dispatch({ type: ‘increment’, payload: 1 })
dispatch({ type: ‘increment’, payload: 2 })
dispatch({ type: ‘increment’, payload: 23 })
...为了简化写法，许多人推荐的方案是创建一个Action生成函数。
代码语言：javascript复制function increment(state) {
return {
type: 'increment’,
payload: state
}
}从结果上来看，使用确实简单一些了
代码语言：javascript复制dispatch(increment(1))
dispatch(increment(2))
dispatch(increment(23))
...但是代码可读性急剧降低。
一个大型项目中，需要修改的状态至少数以千计，要维护这么多的Action，人都要疯。
复杂度无法预知的Store
实践中的Store可不仅仅只是一个数字。
如果将redux的Store从顶层父组件注入，这个Store的复杂度在大型项目中一定会远超想象，而且会随着项目内容的增加，还会变得越来越复杂。
代码语言：javascript复制const state = {
pageHomeState: {
list: [],
loading: false,
data: {
videos: [],
movies: [],
author: ‘’
},
…
},
pageOneState: {},
pageOneState: {},
pageOneState: {},
}复杂到令人绝望的Reducer
当Store变得复杂，专门用于修改Store的Reducer函数也不可避免的会超级复杂。例如我们想要修改上面例子中的author，那么reducer可能会这么写
代码语言：javascript复制function reducer(state, action) {
switch(action.type) {
case ‘author’:
return {
…state,
pageHomeState: {
…state.pageHomeState,
data: {
...state.pageHomeState.data,
author: action.payload
}
}
}
…
}
}这简直就是灾难。
和redux不同的是，useReducer并没有围绕这些痛点提供对应的解决方案。因此如果你想要在项目中使用useReducer，仅仅只建议小范围使用，把复杂度控制在可以接受的范围之内。
3
在Redux中，借助它提供的combineReducer方法，我们可以将多个Reducer合并为一个。这让我们在实践时，可以将整个大的Reducer进行拆分，以减少复杂度。只需要在最后调用该方法合并即可。
我们也可以自己实现这个方法。
首先，我们的目的其实是想要拆分Store，只要Store变得简单，对应的reducer也会变得更好维护。
所以需求有两个，一个是拆分Store，另一个是拆分对应的Reducer。
具体方法实现如下：
代码语言：javascript复制interface IterationOB {
[key: string]: any
}
// 参数为一个对象，里面有所有的reducer
const combineReducer = (reducers: IterationOB) => {
// 取得所有 key
const reducerKeys = Object.keys(reducers);
// 合并之后的State放在这里
let objInitState: IterationOB = {};
// 检查每一项是否有默认值
reducerKeys.forEach((key) => {
// 传入空的type，获取默认值，这样写了之后，action的类型就只能是 { type: 'xxx', } 这种格式了
const initState = reducers[key](undefined, { type: '' })
if (initState == 'undefined'){
throw new Error(`${key} does not return state.`)
}
objInitState[key] = initState;
})
return (state: any, action: any) => {
if(action){
reducerKeys.forEach((key) => {
const previousState = objInitState[key];
objInitState[key] = reducers[key](previousState, action);
})
}
return { …objInitState };
}
}
export default combineReducer;代码的实现思路来自于redux。
从代码中可以看出，该方法并非真正意义上合并了reduer，而是通过闭包的方式，执行所有的reducer，返回了一个合并之后的Store。
试着使用一下这个方法。扩展刚才的案例，实现效果如图所示。
首先定义两个初始状态，并且定义好每个状态对应的reducer函数。然后通过我们自己定义的combineReducer方法合并reducer。
import combineReducer from ‘./combineReducer’;
interface Action {
type: string,
payload: number
}
const stateA: number = 0
function reducerA(state = stateA, action: Action) {
switch (action.type) {
case ‘incrementA’:
return state action.payload
case ‘decrementA’:
return state - action.payload
default:
return state;
}
}
const stateB: number = 0
function reducerB(state = stateB, action: Action) {
switch (action.type) {
case 'incrementB':
return state action.payload
case 'decrementB':
return state - action.payload
default:
return state;
}
}
export default combineReducer({reducerA, reducerB});最后定义函数组件。
代码语言：javascript复制import React, { useReducer } from ‘react’;
import { Button } from ‘antd-mobile’;
import reducer from ‘./reducer’;
export default function Counter() {
const [counter, dispatch] = useReducer(reducer, reducer());
console.log(counter);
return (
<div style={{ width: ‘200px’, margin: ‘auto’ }}>
<div style={{ width: '40px', margin: '100px auto’, fontSize: ‘40px’ }}>{counter.reducerA}</div>
<Button onClick={() => dispatch({type: 'incrementA', payload: 10})}>递增A</Button>
<Button onClick={() => dispatch({type: 'decrementA', payload: 10})}>递减A</Button>
<div style={{ width: '40px', margin: '100px auto', fontSize: ‘40px’ }}>{counter.reducerB}</div>
<Button onClick={() => dispatch({type: ‘incrementB’, payload: 10})}>递增B</Button>
<Button onClick={() => dispatch({type: ‘decrementB’, payload: 10})}>递减B</Button>
</div>
);
}这个简单的例子就这样实现了。
和useState相比，使用reducer实现这样简单的案例，反而让代码更加冗余。因此在使用useReducer时，应该评估好当前应用场景。
当使用useState需要定义太多独立的state时，我们就可以考虑使用useReducer来降低复杂度。
不过当应用场景更加复杂，useReducer也许就不再适用。
分享一个小的知识点：
useState在更新时，源码中调用的方法叫做updateReducer，而在useReducer的实现中，也调用了同样的方法。
4
React hooks能取代redux吗？
有很多人写文章在鼓吹react hooks可以取代redux，大概也许是因为useReducer以及以后我们会介绍的useContext的存在。
前面我们也提到过，redux的开发思维，在实践中有非常多的痛点。redux围绕这些痛点，社区提供了非常多的优秀解决方案。但是到目前为止，useReducer并没有。因此，如果你试图替换redux，那你肯定要为此付出更多的代价。
而redux也提供了一些自定义的hooks方法，让redux的使用变得更加简单。
例如下面这个案例。仍然是经典的计数案例。
使用新的hooks之前
代码语言：javascript复制import React from 'react';
import {connect} from 'react-redux';
import * as actions from '../actions/actions';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
const {count, increment, decrement} = this.props;
return (
<div>
<h1>The count is {count}</h1>
<button onClick={() => increment(count)}> </button>
<button onClick={() => decrement(count)}>-</button>
</div>
);
}
}
const mapStateToProps = store => ({
count: store.count
});
const mapDispatchToProps = dispatch => ({
increment: count => dispatch(actions.increment(count)),
decrement: count => dispatch(actions.decrement(count))
});
export default connect(mapStateToProps, mapDispatchToProps)(App);使用新的hooks之后，
代码语言：javascript复制import React from 'react';
import * as actions from '../actions/actions';
import {useSelector, useDispatch} from 'react-redux';
const App = () => {
const dispatch = useDispatch();
const count = useSelector(store => store.count);
return (
<div>
<h1>The count is {count}</h1>
<button onClick={() => dispatch(actions.increment(count))}> </button>
<button onClick={() => dispatch(actions.decrement(count))}>-</button>
</div>
);
}
export default App;利用自定义的useSelector与useDispatch，代码复杂度降低了很多。因此确切来说，React Hooks的出现，让redux变得更具有竞争力。
不过，我还是不喜欢用redux。
本系列文章的所有案例，都可以在下面的地址中查看
https://github.com/advance-course/react-hooks
本系列文章为原创，请勿私自转载，转载请务必私信我
