React与Redux实战：useContext+useReducer实现状态管理-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43794299/article/details/117405279

一、useContext

使用useContext可以访问全局状态，可以避免状态的层层传递。

符合Redux的规则：状态全局化，并能统一管理。

用来共享状态。

二、useReducer

action：通过action 可以更新复杂的状态，

相当于实现Redux当中的Reducer（更改复杂的业务状态）部分。

用来控制业务逻辑。

三、useContext + useReducer 实现一个 Redux 效果：

1. 整个效果如图：

默认效果：
在这里插入图片描述
红色：

绿色：

粉色：

。。。。。。

2. 组件结构：

父组件（负责操作整个功能模块）
颜色组件（负责 useReducer控制业务逻辑，useContext共享状态）
文字组件（效果展示）
按钮组件（逻辑控制）

3. 源码

本代码采用不规范命名法，只为了方便理解这几个hooks，十分不建议使用

父组件：

/**
 * 父组件只负责展示界面div
 * 这里要注意，使用颜色组件包裹两个子组件（文字组件与按钮组件）
 * 然后才可以实现颜色的共享
 */
import React from 'react'
import 按钮组件 from './按钮组件'
import 文字组件 from './文字组件'
import { 颜色组件 } from "./颜色组件";

function 父组件() {
  return (
    <div>
      {/* 引入颜色组件，相当于已经实现了颜色的共享 */}
      <颜色组件>
        {/* 这里在文字组件要实现动态接收颜色组件的共享 */}
        <文字组件 />
        分割线-------------------------------
        <按钮组件 />
      </颜色组件>
    </div>
  )
}
export default 父组件;

颜色组件：

/**
 * 颜色组件
 * 改组件使用 createContext 与 useReducer 相当于实现了一个 Redux（状态管理）
 */
import React, { createContext, useReducer } from 'react';
// 暴露出去一个颜色上下文
export const ColorContext = createContext({});
// 这里写一个改变颜色的组件
export const 改变颜色 = "颜色配置"
// 实现一个reducer函数
const reducer = (state, action) => {
  // 开始判断要传递的值（对象类型）
  switch (action.type) {   // 进行条件判断，如果更新颜色
    case 改变颜色:            // 如果颜色改变，
      return action.color     // 则返回颜色
    default:
      return state      // 否则返回状态
  }
}
// 这个组件实质上上颜色组件，包裹父组件，则可以实现父组件下的共享状态。
export const 颜色组件 = props => {
  // 在组件内部开始声明 useReducer
  const [color, dispatch] = useReducer(reducer, "#438438")//默认颜色    // [返回值,响应事件的派发器]

  return (
    // 将 color 与 dispatch 都共享出去
    <ColorContext.Provider value={{ color, dispatch }}>
      {/* 这样相当于已经将颜色共享出去了 */}
      {props.children}
    </ColorContext.Provider>
  )
}

文字组件

/**
 * 该组件主要目的为显示文字
 * 通过 useContext 来接收颜色组件传进来的 ColorContext 的值
 */
import React, { useContext } from 'react';
// 引入颜色组件中的参数
import { ColorContext } from "./颜色组件";

function 文字组件() {
  // 这一步是为了得到color
  const { color } = useContext(ColorContext);

  return (
    <div style={{ color: color }}> 字体颜色为{color}</div>
  )
}
export default 文字组件;

按钮组件

/**
 * 该组件为按钮组件，在该组件中
 * 实现按钮传值，将按钮的值
 * 传给 dispatch 这个响应事件派发器
 * 然后这个 dispatch 拿到的是 type事件与 color颜色
 */
import React, { useContext } from 'react'
import { ColorContext, 改变颜色 } from "./颜色组件";

function 按钮组件(params) {
  const { dispatch } = useContext(ColorContext);     // 拿到共享的值,这里将颜色方法与颜色传给  dispatch（响应事件派发器）

  return (
    <div>
      <button onClick={() => { dispatch({ type: 改变颜色, color: "red" }) }}>红色</button>
      <button onClick={() => { dispatch({ type: 改变颜色, color: "yellow" }) }}>黄色</button>
      <button onClick={() => { dispatch({ type: 改变颜色, color: "blue" }) }}>蓝色</button>
      <button onClick={() => { dispatch({ type: 改变颜色, color: "green" }) }}>绿色</button>
      <button onClick={() => { dispatch({ type: 改变颜色, color: "black" }) }}>黑色</button>
      <button onClick={() => { dispatch({ type: 改变颜色, color: "white" }) }}>白色</button>
      <button onClick={() => { dispatch({ type: 改变颜色, color: "pink" }) }}>粉色</button>
      <button onClick={() => { dispatch({ type: 改变颜色, color: "gray" }) }}>灰色</button>
    </div>
  )
}
export default 按钮组件;