useReducer代替Redux小案例-2（八）

經過上節課的學習，用useContext實現了Redux狀態共享的能力，這節課看一下如何使用useReducer來實現業務邏輯的控制。須要注意的是這節課的內容是接着上節課的，須要你把上節課的代碼部分完成，才能夠繼續學習。若是不學習我相信有可能你會聽不懂。

在color.js中添加Reducer

顏色（state）管理的代碼咱們都放在了color.js中，因此在文件裏添加一個reducer，用於處理顏色更新的邏輯。先聲明一個reducer的函數，它就是JavaScript中的普通函數，在講useReducer的時候已經詳細講過了。有了reducer後，在Color組件裏使用useReducer,這樣Color組件就有了那個共享狀態和處理業務邏輯的能力，跟之前使用的Redux幾乎同樣了。以後修改一下共享狀態。咱們來看代碼：

import React, { createContext,useReducer } from 'react';

export const ColorContext = createContext({})

export const UPDATE_COLOR = "UPDATE_COLOR"

const reducer= (state,action)=>{
    switch(action.type){
        case UPDATE_COLOR:
            return action.color
        default:
            return state
    }
}


export const Color = props=>{
    const [color,dispatch]=useReducer(reducer,'blue')
    return (
        <ColorContext.Provider value={{color,dispatch}}>
            {props.children}
        </ColorContext.Provider>
    )
}

注意，這時候咱們共享出去的狀態變成了color和dispatch,若是不共享出去dispatch，你是沒辦法完成按鈕的相應事件的。

經過dispatch修改狀態

目前程序已經有了處理共享狀態的業務邏輯能力，接下來就能夠在buttons.js使用dispatch來完成按鈕的相應操做了。先引入useContext、ColorContext和UPDATE_COLOR，而後寫onClick事件就能夠了。代碼以下:

import React ,{useContext} from 'react';
import {ColorContext,UPDATE_COLOR} from './color'

function Buttons(){
    const { dispatch } = useContext(ColorContext)
    return (
        <div>
            <button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"red"})}}>紅色</button>
            <button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"yellow"})}}>黃色</button>
        </div>
    )
}

export default Buttons

這樣代碼就編寫完成了，用useContext和useReducer實現了Redux的效果，這個代碼編寫過程比Redux要簡單，可是也是有必定難度的。但願第一次接觸的小夥伴能本身動手寫5遍以上，把這種模式掌握好。

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