超性感的React Hooks（七）useReducer

用户6901603

发布于 2020-07-27 16:57:03

2.1K0

发布于 2020-07-27 16:57:03

文章被收录于专栏：不知非攻不知非攻

useReducer是React hooks提供的API之一，它和redux的使用几乎一样。因此如果你熟悉redux，那么自然就已经知道如何去使用useReducer了。

1

我用最简单的递增递减的案例，来和大家分享一下它的用法。

最终实现效果如图。

首先从React中引入

import React, { useReducer } from ‘react’;

然后需要定义一个状态值，以表示useReducer维护的数据格式。此时的状态比较简单，只需要指定为一个数字即可。初始化设置为0

在redux中，我们称这样的状态值为Store

const initialState: number = 0;

然后我们需要定义一个Reducer，Reducer是一个函数。在该函数中，我们需要指定状态的改变方式。

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了。

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应该变成如下所示

dispatch({ type: ‘increment’, payload: 10 })

多处使用时

dispatch({ type: ‘increment’, payload: 1 })
dispatch({ type: ‘increment’, payload: 2 })
dispatch({ type: ‘increment’, payload: 23 })
...

为了简化写法，许多人推荐的方案是创建一个Action生成函数。

function increment(state) {
  return {
    type: 'increment’,
      payload: state
  }
}

从结果上来看，使用确实简单一些了

dispatch(increment(1))
dispatch(increment(2))
dispatch(increment(23))
...

但是代码可读性急剧降低。

一个大型项目中，需要修改的状态至少数以千计，要维护这么多的Action，人都要疯。

复杂度无法预知的Store

实践中的Store可不仅仅只是一个数字。

如果将redux的Store从顶层父组件注入，这个Store的复杂度在大型项目中一定会远超想象，而且会随着项目内容的增加，还会变得越来越复杂。

const state = {
  pageHomeState: {
    list: [],
    loading: false,
    data: {
      videos: [],
      movies: [],
      author: ‘’
    },
    …
  },
  pageOneState: {},
  pageOneState: {},
  pageOneState: {},
}

复杂到令人绝望的Reducer

当Store变得复杂，专门用于修改Store的Reducer函数也不可避免的会超级复杂。例如我们想要修改上面例子中的author，那么reducer可能会这么写

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。

具体方法实现如下：

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});

最后定义函数组件。

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之前

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之后，

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。