React使用useReducer，createContext，useContext实现redux的功能

封装的共享数据组件（核心）

import React,{useReducer,createContext} from 'react';

export const prodata=createContext({})//创建共享数据

export const reducer=(state,action)=>{ //创建reducer条件
    switch (action.type){
        case 'color':
            return action.color
        default:
            return state
    }
}

export const Color=props=>{
    const [color,dispatch]=useReducer(reducer,'red')
    return (
        <prodata.Provider value={{color,dispatch}}>//使用Provider 包裹便于传递数据
            {props.children}
        </prodata.Provider>
    )
}

需要传值的组件

//app.js
import React from 'react';
import Btn from './Btn'
import Font from './Font'
import {Color} from './data'  //引入包裹组件
function App(){
    return (
        <Color>
            <Font></Font>
            <Btn></Btn>
        </Color>
    )
}
export default App 

//文字
import React,{useContext} from 'react';
import {prodata} from './data' //引入context名
function Font(){
    const {color}=useContext(prodata) //解构得到属性
    return(
        <h1 style={{color:color}}>颜色为{color}</h1>
    )
}

export default Font

//按钮
import React,{useContext} from 'react';
import {prodata} from './data'//引入context名
function Btn(){
    const {dispatch}=useContext(prodata)//解构得到dispatch方法
    return(
        <div>
            <button onClick={()=>{dispatch({type:'color',color:'green'})}}>red</button>
            <button onClick={()=>{dispatch({type:'color',color:'yellow'})}}>yellow</button >
        </div>
    )
}
export default Btn