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