当我们使用redux进行数据管理的时候,一般都是在根组件通过Provider的方式引入store,然后在每个子组件中,通过connect的方式使用高阶组件进行连接,这样造成的一个问题是,大量的高阶组件代码冗余度特别高,既然hooks带来了新特性,不如一起来用用看

目录结构如下:

  • action/example/index.js:

    我们还使用redux的思想,编写action
  • reducer/example/index.js:

    处理action,不同于redux的reducer,这里我们可以不用提供初始状态
  • 根组件App.js:

    Provider提供给子组件context

    useReducer定义的位置,引入一个reducer并且提供初始状态initialState
  • 子组件component/example/example.js:

    useContext定义的位置,获取祖先组件提供的context

    useEffect用于进行异步请求

1.reducer/example/index.js

import * as Types from '../../types/types';

export const defaultState = {
count: 0
} export default (state, action) => {
switch(action.type) {
case Types.EXAMPLE_TEST:
return {
...state,
count: action.count
}
default: {
return state
}
}
}

2.action/example/index.js

import * as Types from '../../types/types';

export const onChangeCount = count => ({
type: Types.EXAMPLE_TEST,
count: count + 1
})

3.根组件App.js

import React, { useReducer } from 'react';
import Example from './test/example';
import example, { defaultState } from './reducer/example'; export const ExampleContext = React.createContext(null); const App = () => { const [exampleState, exampleDispatch] = useReducer(example, defaultState); return (
<ExampleContext.Provider value={{exampleState, dispatch: exampleDispatch}}>
<Example />
</ExampleContext.Provider>
);
} export default App;

4.子组件component/example/example.js

import React, { useState, useEffect, useReducer, useContext } from 'react';

import actions from '../../action';
import { ExampleContext } from '../../App'; const Example = () => { const exampleContext = useContext(ExampleContext); useEffect(() => {
window.document.title = `you click ${exampleContext.exampleState.count} times`;
}, [exampleContext.exampleState.count]); return (
<div>
<p>you can click it</p>
<button onClick={() => exampleContext.dispatch(actions.onChangeCount(exampleContext.exampleState.count))}>click it</button>
</div>
)
} export default Example;

5.types/types.js

export const EXAMPLE_TEST = 'EXAMPLE_TEST';

总结

使用useContext()时候我们不需要使用Consumer了。但不要忘记export和import上下文对象

使用React Hooks新特性useReducer、useContext替代传统Redux高阶组件案例的更多相关文章

  1. React Hooks新特性学习随笔

    React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...

  2. React躬行记(10)——高阶组件

    高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中 ...

  3. React文档(二十四)高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  4. React进阶之高阶组件

    前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...

  5. 【转】react的高阶组件

    React进阶之高阶组件   前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...

  6. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  7. React高阶组件总结

    在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...

  8. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  9. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

随机推荐

  1. bzoj2616: SPOJ PERIODNI——笛卡尔树+DP

    不连续的处理很麻烦 导致序列DP又找不到优秀的子问题 自底向上考虑? 建立小根堆笛卡尔树 每个点的意义是:高度是(自己-father)的横着的极大矩形 子问题具有递归的优秀性质 f[i][j]i为根子 ...

  2. Easyui的DateBox日期格式化

    http://www.cnblogs.com/wintalen/archive/2011/06/10/2077171.html DateBox 日期显示默认的格式为“dd/mm/yyyy”,如果想自定 ...

  3. Hadoop生态圈-Flume的主流source源配置

    Hadoop生态圈-Flume的主流source源配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本篇博客只是配置的是Flume主流的Source,想要了解更详细的配置信息请参 ...

  4. LFS、BLFS、ALFS、HLFS的区别

    转自:http://www.ha97.com/3927.html Linux From Scratch (LFS) 及其后代代表一种新方法,向用户揭示 Linux 操作系统是如何工作的.LFS 基于这 ...

  5. bzoj千题计划191:bzoj2337: [HNOI2011]XOR和路径

    http://www.lydsy.com/JudgeOnline/problem.php?id=2337 概率不能异或 但根据期望的线性,可以计算出每一位为1的概率,再累积他们的期望 枚举每一位i,现 ...

  6. bzoj千题计划188:bzoj1923: [Sdoi2010]外星千足虫 (高斯—若尔当消元法解异或方程组)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1923 #include<cstdio> #include<cstring> ...

  7. springMvc + Maven 项目提示 hessian 依赖包 无法下载;

    首先 从 https://github.com/alibaba/dubbo/archive/master.zip 下载最新的 dubbo 源码包到本地某个目录, 解压出来: cmd 进入该目录: 执行 ...

  8. NOIP2016-D2-T2 蚯蚓(单调队列)

    构建三个单调队列(用STL),分别储存未切的蚯蚓,切后的第一段,切后的第二段,即可简单证明其单调性. 证明:设$q$为单调队列$\because a_1 \geqslant a_2 \geqslant ...

  9. ffmpeg查看音频文件信息

    查看音频文件的信息(基于本地路径) import subprocess import json path = r'D:\learn\download\NosVJ60QCIs0b8PVHMPomZJsr ...

  10. Django进阶之session

    基于cookie做用户验证时:敏感信息不适合放在cookie中 session依赖cookie session原理 cookie是保存在用户浏览器端的键值对 session是保存在服务器端的键值对 s ...