模拟redux的combineReducers函数合并reducer，使用createContext, useContext, useReducer整合多个reducer案例

最新推荐文章于 2025-05-21 21:44:31 发布

置顶

Mack Liu

最新推荐文章于 2025-05-21 21:44:31 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： react TypeScript 文章标签： redux react hooks typescript

本文链接：https://blog.youkuaiyun.com/weixin_43902189/article/details/99649867

本文提供了一个使用createContext, useContext和useReducer来模拟Redux的combineReducers功能的案例。通过3个文件（redux-custom.tsx, reducer.ts, test.tsx）展示如何在React中整合多个reducer，实现状态管理。代码已上传至github的hooks-useReducer-integration仓库，欢迎大家查看并支持。" 107857566,9966567,旅游网站设计与数据库架构,"['Java', 'PHP', '.NET', 'Python', 'Web开发', '数据库管理']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个整合多个reducer的useRedcuer的案例

`注意:hooks只能在函数(无状态组件)中使用`

npm i redux-custom --save 下载这个小型依赖库

1.redux-custom.tsx `对useCustomRedux进行了优化`

import React, {
   
    Context, createContext, useContext, useReducer } from 'react';
/** 
 * @createContext ProviderContext 一个创建完毕的context
*/
const ProviderContext: Context<any> = createContext('provider');
/** 高阶函数
 *  @param reducer 传入一个整合或者没有整合的reducer
 *  @param initialState 传入一个初始化的state，用来当做默认值
 */
export default (reducer: Function, initialState: any) => (Com: React.FC | React.ComponentClass) => {
   
   
    return () => {
   
   
        const [state, dispatch] = useReducer<any>(reducer, initialState);
        return (
            <ProviderContext.Provider value={
   
   {
   
    state