我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

来复述一下目前的两个观点:useReducer状态管理是useState的升级版,useContext可以跨组件实现数据传递。如果想要执行一个action,那么可以从context中获得dispatch,继而修改状态数据。总的思路就是,使用useReducer生成加强版本的statedispatch,然后通过context提供给全部组件使用。

苏南大叔:react,useReducer结合useContext实现跨组件状态管理 - usereducer-usecontext
react,useReducer结合useContext实现跨组件状态管理(图4-1)

大家好,这里是苏南大叔的程序如此灵动博客,这里记录苏南大叔和计算机代码的故事。本文描述react中的useReduceruseContext结合,在组件中传递执行数据的组合写法。测试环境:create-react-app@5.0.1node@16.14.2react@18.2.0react-dom@18.2.0

前文回顾

本文的正确理解,可能需要您查看下面三篇文章:

苏南大叔:react,useReducer结合useContext实现跨组件状态管理 - 运行界面截图
react,useReducer结合useContext实现跨组件状态管理(图4-2)

定义reducercontext

import React, { useReducer, useContext } from 'react';
const sunanContext = React.createContext(null);
const sunanReducer = (state, action) => {
    switch (action.type) {
        case "add":
            return {...state,text: action.text}
        default:
            throw Error();
    }
}

苏南大叔:react,useReducer结合useContext实现跨组件状态管理 - provider-value-props
react,useReducer结合useContext实现跨组件状态管理(图4-3)

定义Provider,传递props

function SunanComponent() {
    const [sunanState, sunanDispatch] = useReducer(sunanReducer, { text: "----" });
    return (
        <sunanContext.Provider value={sunanDispatch}>
            <SunanOuter sunan={sunanState} />
        </sunanContext.Provider>
    );
}
export default SunanComponent;

定义展示组件

function SunanInner(props) {
    const dispatch = useContext(sunanContext);
    function handleClick() {
        dispatch({ type: 'add', text: '高兴' });
    }
    return (
        <>
            子组件接收状态:{props.sunan.text} &nbsp;
            <button onClick={handleClick.bind()}>High起来</button>
        </>
    );
}
function SunanOuter(props) {
    return <>
        苏南大叔的心情:{props.sunan.text}<br /><br />
        <SunanInner sunan={props.sunan} />
    </>
}

苏南大叔:react,useReducer结合useContext实现跨组件状态管理 - props传递属性
react,useReducer结合useContext实现跨组件状态管理(图4-4)

如果要仔细查看代码的话,本文的代码最大的问题就在这里了。虽然多层嵌套的组件,可以通过context功能获得dispatch函数,从而获得执行action的能力。但是,修改state数据后,还是需要通过props层层向下传递,如果层级比较多的话,这仍然是个大问题。所以,这里的状态变量传递写法是有问题的。解决方案是什么呢?请关注苏南大叔的后续文章。

相关链接

结束语

更多react相关经验文章,请参考苏南大叔的博客:

助理微信

微信打赏码

微信公众号

微信小程序

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react