使用React Hooks新特性useReducer、useContext替代传统Redux高阶组件案例
当我们使用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高阶组件案例的更多相关文章
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
- React躬行记(10)——高阶组件
高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中 ...
- React文档(二十四)高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
- React进阶之高阶组件
前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只不过传入的参数变成了react ...
- 【转】react的高阶组件
React进阶之高阶组件 前言 本文代码浅显易懂,思想深入实用.此属于react进阶用法,如果你还不了解react,建议从文档开始看起. 我们都知道高阶函数是什么, 高阶组件其实是差不多的用法,只 ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
- React高阶组件总结
在多个不同的组件中需要用到相同的功能,这个解决方法,通常有Mixin和高阶组件. Mixin方法例如: //给所有组件添加一个name属性 var defaultMixin = { getDefaul ...
- 利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
随机推荐
- IntelliJ IDEA(2018)安装详解
转: IntelliJ IDEA(2018)安装详解 置顶 2018年06月06日 22:58:45 Lazymanx 阅读数:95701 版权声明: https://blog.csdn.net/ ...
- 弹指之间 -- Folk Rock
CHAPTER 17 民谣摇滚 Folk Rock 以8Beat为主,120左右的速度最能表现此节奏特色. 示例曲目: 略
- [Java] Servlet工作原理之一:体系结构及其容器
一.Servlet体系结构 在 servlet-api.jar (2.5) 中有两个包:javax.servlet 和 javax.servlet.http 1 Servlet ...
- 流媒体技术学习笔记之(七)进阶教程OBS参数与清晰度流畅度的关系
源码地址:https://github.com/Tinywan/PHP_Experience 很多主播问过OBS的参数到底什么影响画质,到底什么影响流畅度,那么本篇教程尽量用通俗的语言解释下一些重要参 ...
- Bower使用笔记
全局安装bower $ npm install -g bower 检测成功 $ bower help 在项目根目录下进行安装(最新版本),会自动生成一个bower_components文件夹(如果在c ...
- 【原创】javascript模板引擎的简单实现
本来想把之前对artTemplate源码解析的注释放上来分享下,不过隔了一年,找不到了,只好把当时分析模板引擎原理后,自己尝试 写下的模板引擎与大家分享下,留个纪念,记得当时还对比了好几个模板引擎来着 ...
- php银行卡校验
前言银行金卡,维萨和万事达.银联品牌,如果是贷记卡或准贷记卡,一定为16位卡号.而借记卡可以16-19位不等.美国运通卡则不论金卡或是白金卡.普通卡,都是15位卡号.16-19 位卡号校验位采用 Lu ...
- centos安装lrzsz
yum -y install lrzsz 使用rz打开上传框
- ASP.NET MVC3-Music Store中英文教程 [下载]
翻译原文档名: MVC Music Store版本: ASP.NET MVC3概述Mvc Music Store 是一个为WEB开发人员一步一步介绍和解释如何使用MVC和Visual Web开发的应用 ...
- 20155204 2016-2017-2 《Java程序设计》第8周学习总结
学号 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 想要取得channel的操作对象,可以使用channels类,它定义了静态方法newChannel(). ...