使用react Context+useReducer替代redux
首先明确一点,Redux 是一个有用的架构,但不是非用不可。事实上,大多数情况,你可以不用它,只用 React 就够了。
曾经有人说过这样一句话。
"如果你不知道是否需要 Redux,那就是不需要它。"
Redux 的创造者 Dan Abramov 又补充了一句。
"只有遇到 React 实在解决不了的问题,你才需要 Redux 。"
redux使用教程
回归正题
如何使用context+useReducer来做类似于Vuex一样的全局状态管理.
- 首先使用create-react-app创建项目
npx create-react-app my-app
cd my-app
npm start
2. 在src目录下创建state文件夹,里面只有一个index.js文件
src
| ---- state
| ------index.js
...
3. state>index.js代码如下
import React, { useReducer } from "react" //导入react, const State = React.createContext() //创建Context对象,来向组件树传递数据
//定义reducer的改变规则
const ADD = "ADD"
const DECREASE = "DECREASE"
function reducer(state, action) {
switch (action) {
case ADD:
return state + 1
case DECREASE:
return state - 1
default:
return state
}
}
//定义一个组件来包裹需要获取到共享数据的组件
const StateProvider = props => {
//获取值和设置值的方法,0是默认值
const [state, dispatch] = useReducer(reducer, 0)
/* value 就是组件树能够拿到的数据,传了一个state值,和一个dispatch方法
dispatch就是为了改变state用的 */
return <State.Provider value={{ state, dispatch }}>
{props.children}
</State.Provider>
} export {
State, StateProvider, ADD, DECREASE
}
4. src目录下只留下state文件夹,index.js文件,App.js文件,新建components文件夹
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { StateProvider } from "./state" ReactDOM.render(
<StateProvider>
<App />
</StateProvider>,
document.getElementById('root')
);
src/App.js
import React, { useContext } from "react"
import MyComponents01 from "./components/MyComponents01"
import { State, ADD, DECREASE } from "./state" //取出context对象 export default function App() {
const { dispatch }=useContext(State) //获取到dispatch
return <>
<h1>计数器:</h1>
<div>
<button onClick={()=> dispatch(ADD)}>+1</button>
<button onClick={()=> dispatch(DECREASE)}>-1</button>
</div>
<MyComponents01 />
</> }
src/components/MyComponents01.js
import React, { useContext } from "react"
import { State } from "../state" //取出context对象 export default function MyComponents01(){
//取出共享的数据state
const { state }=useContext(State) return <div>
共享数据:{state}
</div>
}
最终效果
tips
只要在Provide组件下, 所有的组件都可以获取到共享数据,
获取共享数据也很简单.引入Context对象
在组件内部使用const { ... } =useContext(创建的Context对象)即可
使用react Context+useReducer替代redux的更多相关文章
- React Hooks +React Context vs Redux
React Hooks +React Context vs Redux https://blog.logrocket.com/use-hooks-and-context-not-react-and-r ...
- useReducer代替Redux小案例-1(七)
使用useContext和useReducer是可以实现类似Redux的效果,并且一些简单的个人项目,完全可以用下面的方案代替Redux,这种做法要比Redux简单一些.因为useContext和us ...
- 探索 Redux4.0 版本迭代 论基础谈展望(对比 React context)
Redux 在几天前(2018.04.18)发布了新版本,6 commits 被合入 master.从诞生起,到如今 4.0 版本,Redux 保持了使用层面的平滑过渡.同时前不久, React 也从 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 前端笔记之React(五)Redux深入浅出
一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...
- useReducer代替Redux
创建state.js import React, { createContext,useContext,useReducer } from 'react'; export const countTex ...
- useReducer代替Redux小案例-2(八)
通过上节课的学习,用useContext实现了Redux状态共享的能力,这节课看一下如何使用useReducer来实现业务逻辑的控制.需要注意的是这节课的内容是接着上节课的,需要你把上节课的代码部分完 ...
- 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿
前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
随机推荐
- [第二届全国中学生网络安全竞赛]bypass
前几天拿到了线下赛的源码,做做看.这道主要是命令执行的黑名单绕过 先看看给出的代码: <?php highlight_file(__FILE__); error_reporting(0); $b ...
- php中的加密解密模块-mcrypt
<?php /* 打开加密算法和模式 */ $td = mcrypt_module_open('rijndael-256', '', 'ofb', ''); /* 创建初始向量,并且检测密钥长度 ...
- 阿里云体验实验室 体验教程《Linux指令入门-系统管理》
体验平台简介 阿里云开发者实验室提供免费云资源和丰富的场景化实践,旨在帮助开发者在学习应用技术,了解阿里云产品的特性. 阿里云体验实验室地址:https://developer.aliyun.com/ ...
- JS中有趣的内置对象-JSON
前言 在以前的web开发中,我们多数选择纯文本或XML作为我们的提交的数据格式,大多数是XML,少数纯文本.其实从AJAX(Asynchronous JavaScript and XML)的命名我们也 ...
- 原生JDK网络编程- NIO
什么是NIO? NIO 库是在 JDK 1.4 中引入的.NIO 弥补了原来的 I/O 的不足,它在标准 Java 代码中提供了高速的.面向块的 I/O.NIO翻译成 no-blocking io 或 ...
- 网易云uwp
起因 昨天晚上折腾Ubuntu 莫名其妙任务栏的网易云音乐图标消失了,今早才发现原来是更新了. but,这个更新真的是让人一言难尽 upw更新一下直接变成了桌面版? 折腾 重新装回老版uwp 网易云U ...
- MvvmLight框架使用入门(5)
上一次写MvvmLight框架使用入门(4)的时候还在用Visual Studio 2015,我儿子也不会过来盖上我的XPS……重启这个系列一方面是因为最近又开始写UWP的东西了,另一个是因为Mvvm ...
- 数字,字符串,逻辑比较在IF语句中的判断应用
Shell 语言中的if条件 一.if的基本语法: if [ command ];then 符合该条件执行的语句 elif [ command ];then 符合该条件执行的语句 else 符合该条 ...
- 《Java从入门到失业》第四章:类和对象(4.2):String类
4.2String类 这一节,我们学习第一个类:String类.String翻译成汉语就是“字符串”,是字符的序列.我们知道,在Java中,默认采用Unicode字符集,因此字符串就是Unicode字 ...
- 如何把Github上好的项目pull到本地或者fork到本地(码云仓库同理)?
首先Github账户的注册我就不想再啰嗦了,我想大家都会的. 其次怎么把自己的项目push到自己的Github仓库请参考我的另一篇博客: 如何把自己开发的项目上传到GitHub仓库或者码云仓库? 最后 ...