React之useReducer

React Hook功能发布后，允许在Function Component中使用useState(状态)、useEffect(副作用)。

useState的单条声明的方式相当于变相的把React组件分解的越来越小。（因为一条一条写太麻烦了呀～）。但是在开发中，一个组件中出现几十个状态的也是常有的事情。

像这样：

const page = () => {
   const [dataSource, setDataSource] = useState([]);
   const [loading, setLoading] = useState(false);
   const [visible, setVisible] = useState(false);
   const [fifterName,setFifterName] = useState('');
   ...
  const [order, setOrder] = useState(-1);
}

这能忍吗？？？（突然有点怀念class component了～）

再想一下每一个state还有一个对应的专门改变state的函数，还要管理这些函数

啊心态崩了

莫慌,useReducer他来了

先看看useReducer改造下它的代码吧

const [state, dispach] = useReducer(reducer, initialState);

const initialState = {
  dataSource: [],
  loading: false,
  visible: false,
  filterName: '',
  ...
  order: -1
}

const reducer = (state, action) => {
   let newState = {...state};
  switch(action.type) {
    case 'SET_DATA':
      newState.dataSource = action.dataSource;
      break
    case 'OPEN_LOADING':
      newState.loading = true;
      break
    ...
    default: 
      newState = state;
  }
  return newState
}

// 改变状态只需要发送一个action即可

const getData = () => {
  axios(...).then(res => {
    const dataSource = res.data.data || [];
    const action = {
      type: 'SET_DATA',
      dataSource
    }
    dispach(action)
  })
}

useReducer可以接受两个参数

1. initialState: 初始化的state
2. reducer : 处理action的纯函数。

注意！reducer中不建议去做逻辑运算，会使你的代码看起来很乱

useReducer返回两个参数

1. 当前时刻的state
2. 负责发送action的dispach函数

想要改变某个state?很简单，你只需要用dispach向useReducer发送一个action,然后用action.type来区分reducer收到这个action后的行为即可。

例如：

//在上述代码中，我们在setDataSource的同时，应该关掉loading。
// 我们只需要在 case 为 ’SET_DATA‘下增加一条
  newState.loading = false
// 即可

用过redux的朋友一定会觉得，这玩意和redux用法咋这么像呢。。

emmmmm不可以说像，简直可以说是一模一样了

乍一看，代码看起来好像更长了，但明显useReducer改造后的逻辑看起来更加清楚，你可以将这些状态整合的无限细。快来拥抱useReducer吧！