P06：useReducer介绍与使用方法

红太狼 2023-10-06 21:00 14阅读 0赞

#### React Hooks ####

*  阐述
 *  reducer是什么？
 *  useReducer 的使用

## 阐述 ##

在之前的文章我们学习了useContext函数，那本文就带大家学习一下useReducer，因为他们两个很像，并且合作可以完成类似的Redux库的操作。

在开发中使用useReducer可以让代码具有更好的可读性和可维护性，并且会给测试提供方便，所以我们有必要彻底的学习一下useReducer。

本文我们只是简单的学习一下useReducer语法和使用方法，尽量避免Redux的一些操作。这样讲更容易让不了解Redux的小伙伴接受。

## reducer是什么？ ##

为了更好的理解useReducer，所以先要了解JavaScript里的Redcuer是什么。

它的兴起是从Redux广泛使用开始的，但不仅仅存在Redux中，可以使用JavaScript来完成Reducer操作。那reducer其实就是一个函数，这个函数接收两个参数，一个是状态，一个用来控制业务逻辑的判断参数。

我们举一个最简单的例子：

function countReducer(state, action) {
        
        switch(action.type) {
        
            case 'add':
                return state + 1;
            case 'sub':
                return state - 1;
            default: 
                return state;
        }
    }

上面的代码就是Reducer，你主要理解的就是这种形式和两个参数的作用，一个参数是状态，一个参数是如何控制状态。

## useReducer 的使用 ##

了解reducer的含义后，就可以讲useReducer了，它也是React hooks提供的函数，可以增强我们的Reducer，实现类似Redux的功能。我们新建一个 Example7.js 的文件，然后用useReducer实现计数器的加减双向操作。

`ReactHooksDemo\demo01\src\Example7.js`

import React, {
         useReducer } from 'react';
    
    function ReducerDemo(){
        
        const [ count , dispatch ] =useReducer((state,action)=>{
        
            switch(action){
        
                case 'add':
                    return state+1
                case 'sub':
                    return state-1
                default:
                    return state
            }
        },0)
        return (
           <div>
               <h2>现在的分数是{
        count}</h2>
               <button onClick={
        ()=>dispatch('add')}>Increment</button>
               <button onClick={
        ()=>dispatch('sub')}>Decrement</button>
           </div>
        )
    
    }
    
    export default ReducerDemo

这段代码是useReducer的最简单实现了，这时候可以在浏览器中实现了计数器的增加减少。

修改index.js文件，让ReducerDemo组件起作用。

`ReactHooksDemo\demo01\src\index.js`

import React from 'react';
    import ReactDOM from 'react-dom';
    import Example from './Example7';
    
    ReactDOM.render(<Example />, document.getElementById('root'));

![在这里插入图片描述][bcca649b982149cc856d7d5292e4d7f5.gif_pic_center]

[bcca649b982149cc856d7d5292e4d7f5.gif_pic_center]: https://img-blog.csdnimg.cn/bcca649b982149cc856d7d5292e4d7f5.gif#pic_center