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