react中useContext与useReducer 代替 redux

Z时代
2024-01-10
分类：综合

react

主要思想：

1.使用redux的action以及dispatch方法将数据存在一个组件中；

2.使用createContext,useContext进行父子组件传值;

import React ,{  }from 'react';
import { Content } from './content'
import { Color } from './color'
//index页面
export const Index =()=>{
    return(
        <div>
              {/* Color组件作为父组件作为包裹 */}
            <Color>
              {/* 注意父子关系才能使用 */}
                <Content />
            </Color>
        </div>
    )
}
//起存储数据的redux页面，父组件
import React ,{ createContext,useReducer } from 'react';
export const Context = createContext({})
 {/* reducer作为变量而不是函数*/}
const reducer = (state,action)=>{
    switch (action.type){
        case 'update_color':
            return action.color
        default :
            return 'purple'
    }
}
export const Color =props=>{
 {/* props是指包含子组件的结构 */}
    const [color,dispatch] = useReducer(reducer,'purple')
    return (
        <Context.Provider value={{color,dispatch}}>
            {props.children}
        </Context.Provider>
    )
}
//操作数据的子组件
import React ,{ useState ,useContext }from 'react';
import { Context } from './color'
export const Content =()=>{
     {/* 这里是对象，不是数组，value是对象 */}
    const {color,dispatch} = useContext(Context)
    return(
        <div>
            <p style={{color:color}}>字体颜色是：{color}</p>
            <button onClick={()=>{dispatch({type:'update_color',color:'green'})}}>green</button>&nbsp;
            <button onClick={()=>{dispatch({type:'update_color',color:'red'})}}>red</button>
        </div>
    )
}