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