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