P07：用useReducer实现Redux效果的小案例

import React, { useReducer } from 'react';
import ShowArea from './example6/ShowArea';
import Buttons from './example6/Buttons';

function Example6(){
    return (
        
            
            
        
    )
}

export default Example6

这步做完，需要到 /src 目录下的 index.js 中引入一下 Example6.js 文件，引入后React才能正确渲染出刚写的UI组件。

ReactHooksDemo\demo01\src\index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Example from './Example6';

ReactDOM.render(, document.getElementById('root'));

做完这步可以简单的预览一下UI效果，虽然很丑，但是只要能满足学习需求就可以了。

我们虽然都是前端，但是在学习时没必要追求漂亮的页面，关键时把知识点弄明白。我们写这么多文件，也就是要为接下来的知识点服务，其实这些组件都是陪衬罢了。

有了UI组件后，就可以写一些业务逻辑了，接下来我们先实现状态共享，这个就是利用useContext。在example6文件夹下建立一个Color.js文件，然后写入下面的代码。

ReactHooksDemo\demo01\src\example6\Color.js

import React, { createContext } from 'react';

export const ColorContext = createContext({})

export const Color = props => {
    return (
        
            {props.children}
        
    )
}

代码中引入了 createContext 用来创建共享上下文 ColorContext 组件，然后我们要用{props.children} 来显示对应的子组件。

有了这个组件后，我们就可以把 Example6.js 进行改写，让她可以共享状态。

ReactHooksDemo\demo01\src\Example6.js

import React from 'react';
import ShowArea from './example6/ShowArea';
import Buttons from './example6/Buttons';
import { Color } from './example6/Color';   //引入Color组件

function Example6(){
    return (
        
            
                
                
            
        
    )
}

export default Example6

然后再改写 showArea.js 文件，我们会引入 useContext 和在 color.js 中声明的ColorContext，让组件可以接收全局变量。

ReactHooksDemo\demo01\src\example6\ShowArea.js

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

function ShowArea(){
    const {color} = useContext(ColorContext)
    return (字体颜色为{color})

}

export default ShowArea

这时候就通过useContext实现了状态的共享，可以到浏览器中看一下效果。

上面我们用useContext实现了Redux状态共享的能力，这节课看一下如何使用useReducer来实现业务逻辑的控制。

颜色（state）管理的代码我们都放在了 color.js 中，所以在文件里添加一个reducer，用于处理颜色更新的逻辑。

先声明一个reducer的函数，它就是JavaScript中的普通函数，在讲useReducer的时候已经详细讲过了。

有了reducer后，在Color组件里使用useReducer,这样Color组件就有了那个共享状态和处理业务逻辑的能力，跟以前使用的Redux几乎一样了。

之后修改一下共享状态。我们来看代码：

ReactHooksDemo\demo01\src\example6\Color.js

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,'red')
    return (
        
            {props.children}
        
    )
}

注意，这时候我们共享出去的状态变成了 color 和 dispatch,如果不共享出去dispatch，你是没办法完成按钮的相应事件的。

目前程序已经有了处理共享状态的业务逻辑能力，接下来就可以在 Buttons.js 使用 dispatch来完成按钮的相应操作了。

先引入 useContext、ColorContext 和 UPDATE_COLOR，然后写onClick事件就可以了。

代码如下:

ReactHooksDemo\demo01\src\example6\Buttons.js

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

function Buttons(){
    const { dispatch } = useContext(ColorContext)
    return (
        
            {dispatch({type:UPDATE_COLOR,color:"blue"})}}>蓝色
            {dispatch({type:UPDATE_COLOR,color:"yellow"})}}>黄色
        
    )
}

export default Buttons

这样代码就编写完成了，用 useContext 和 useReducer 实现了Redux的效果，这个代码编写过程比Redux要简单，但是也是有一定难度的。