1、useReducer的使用

useState的替代方案；

• 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
• 或者这次修改的state需要依赖之前的state时，也可以使用useReducer hook来进行处理。

import React, { useReducer } from 'react'
// 初始化状态
const initialState = {
  count: 200
}
// 注意这里的state是useReducer函数的第二个参数 直接传入到reducer函数中
function reducer(state, action) {
  switch(action.type) {
    case 'increment':
      // 这里的处理逻辑 和我们传入的初始化值的数据类型有关、传入对象或者普通数值类型的数据 对应不同的处理方案。
      return { ...state, count: state.count + 10 }
    case 'decrement':
      return { ...state, count: state.count - 10 }
    default:
      return state
  }
}
export default function ReducerHookDemo() {
  // 使用useReducer hook 第一个参数是reducer函数 第二个参数是初始化的值
  const [state, dispatch]= useReducer(reducer, initialState)
  return (
    <div>
      <h2>ReducerHookDemo</h2>
      <h2>当前计数: { state.count }</h2>
      <button onClick={ () => dispatch({ type: 'increment' }) }>+10</button>
      <button onClick={ () => dispatch({ type: 'decrement' }) }>-10</button>
    </div>
  )
}

useReducer可以在多个组件之间共享reducer函数，不能共享状态。只是具有操作数据的同一行为，可以更加方便帮助我们拆分相应的逻辑代码，同时还可以复用相应的逻辑代码，达到共用的目的。使我们的数据更加的清晰、简洁。逻辑更加清楚。

2、可以对reducer进行抽取

在实际的业务场景中，我们可以对reucer的处理函数进行相应的抽取，方便在其他的组件中进行使用，其实上就是简单的模块化的思想在里面。

// reducer纯函数的封装
function reducer(state, action) {
  switch(action.type) {
    case 'increment':
      return { ...state, count: state.count + 10 }
    case 'decrement':
      return { ...state, count: state.count - 10 }
    default:
      return state
  }
}
// 将reducer纯函数进行导出 提供给其他的业务组件进行使用
export default reducer;

:::info 总结：
useReducer的作用：它是useState的替代品，在我们在处理比较复杂的状态数据的时候，就可以使用这个hook，这个hook的颗粒度更细腻。
然后我们处理逻辑的reducer函数，可以抽取到一个公共的js文件中，提供给我们实际的业务组件使用，但是这里需要注意的是，我们这里只是对这个函数的逻辑进行复用，组件使用的状态依赖还是组件本身的状态，这里需要注意，我们只是复用了reducer函数的逻辑。 :::