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的功能。咱们新建一个Example5.js的文件，而后用useReducer实现计数器的加减双向操做。（此部分代码的介绍能够看视频来学习）

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组件起做用。

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example5'

ReactDOM.render(<Example />, document.getElementById('root'));

这节课就先到这里，小伙伴们必定对useReducer有所了解啦，那下节课咱们在来用一个具体的例子，实现相似Redux的用法。

转自：https://jspang.com/posts/2019/08/12/react-hooks.html