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