一看就懂的例子告诉你用react-redux的正确姿势
whay write this: 很多小白在看过很多教程之后仍然在敲代码的时候不清楚应该以什么样的步骤进行,那么这篇文章就一步一步分解整个过程,慢动作回放让大家看的清清楚楚明明白白。
这个小Demo的功能是在input标签中输入内容,同步显示在上方的p标签内,DEMO很简单,大神们轻喷~?
项目代码在这里:https://github.com/oliyg/redu...
clone: https://github.com/oliyg/redu...
废话不多说
首先上图:
/*_________ ____________ ___________| | | | | || Action |------------▶| Dispatcher |------------▶| callbacks ||_________| |____________| |___________|▲ || || |_________ ____|_____ ____▼____
| |◀----| Action | | |
| Web API | | Creators | | Store |
|_________|----▶|__________| |_________|▲ || |____|________ ____________ ____▼____| User | | React | | Change || interactions |◀--------| Views |◀-------------| events ||______________| |___________| |_________|
*/图片来源:[redux-tutorial](https://github.com/happypoulp/redux-tutorial/blob/master/00_introduction.js)
上图是大家再熟悉不过的redux数据流,从这个图中我们可以按照下面这个流程来敲代码:
component(渲染UI) -> action(定义用户操作动作) -> reducer(处理action动作) -> store(处理reducer绑定state和dispatch) -> component(用connect绑定component、用Provider重新渲染UI) -> ...
这里使用了create-react-app安装并start后把一些没用的文件清理掉,增加我们自己的文件
文件目录如下:
srccomponent/Texture.jsaction/action.jsreducer/reducer.jsstore/store.jsApp.js
好,目录文件大概就是这样子,正式开始敲代码
我的位置:component/Texture.js
首先从component开刀(View视图):
引入必要的依赖:
import React from 'react';
创建component(这里省去了propsTypes和defaultProps,仅仅为了方便展示):
const Texture = (props) => (<div><h2>{props.str}</h2><input onChange={props.onChange} placeholder={props.placeholder} /></div>
);
我的位置action/action.js
然后定义action,在这个例子中,我们只有一个动作,修改input值:onChange,在action中命名为onChangeAction,并传入一个参数e,返回包含type和value值的对象,最后暴露模块:
const onChangeAction = (e) => ({type: 'INPUTCHANGE',value: e.target.value}
);export default onChangeAction;
我的位置reducer/reducer.js
定义完action之后,我们自然是想办法处理这个action,那么下一步就是创建reducer:
reducer接收两个参数,并返回新的state,第一个参数state要先设置初始值,否则返回undefined,第二个参数action,接收可能接收到的action参数。
state中设置我们在component中要用到并绑定在视图中显示的props值,就是此前定义的str和placeholder
在reducer内部,需要用到switch检测action的type并根据不同的type来处理相应的action
需要注意的是,我们必须要记得在default情况下返回state,否则若无匹配的action.type,state就会丢失。
const reducer = (state = { str: '✒️write something: ', placeholder: 'here?' }, action) => {switch (action.type) {case 'INPUTCHANGE':return {str: action.value};default:return state;}
};export default reducer;
我的位置:store/store.js
我们知道reducer存在于store内,既然action和reducer都配置好了,接下来就轮到store了
引入redux中createStore模块和之前定义好的reducer,创建store:
import { createStore } from 'redux';
import reducer from '../reducer/reducer';
const store = createStore(reducer);export default store;
我的位置:component/Texture.js
处理完成后我们再回到component中:
这么一来,我们只需要将store中的state和dispatch分别绑定在component中即可打通store中的state和component中的props的联系了,那么我们只需要react-redux提供的connect和Provider即可:
导入相关模块:
import { Provider, connect } from 'react-redux';
import store from '../store/store';
import onChangeAction from '../action/action';
创建mapStateToProps和mapDispatchToProps两个函数:
const mapStateToProps = (state) => {return ({str: state.str,placeholder: state.placeholder});
};
const mapDispatchToProps = (dispatch) => {return ({onChange: (e) => { return dispatch(onChangeAction(e)) }});
};
并将这俩货和store通过connect和Provider绑定到视图中:
const TextureConnect = connect(mapStateToProps, mapDispatchToProps)(Texture);
const TextureWrapper = () => (<Provider store={store}><TextureConnect /></Provider>
);
export default TextureWrapper;
我的位置:App.js
最后,大功告成,在App.js中引入这个组件即可。
//requirement
import React from 'react';
import TextureWrapper from './component/Texture';const App = () => (<TextureWrapper />
);export default App;
另外,component/Texture.js中视图部分最好单独出来,放在新建一个文件夹view目录下,并被名为TextureContainer.js引用,把其他逻辑部分放后者。
一看就懂的例子告诉你用react-redux的正确姿势相关推荐
- 亲身经历告诉你,学好英语的正确姿势(文末附自建英语学习网站)
亲身经历告诉你,学好英语的正确姿势(文末附自建英语学习网站) 为什么要学英语? 你学英语的契机是什么? 缺乏坚持的动力怎么办? 为什么学了好多年英语收效甚微? 如何学好英语? 如何快速构建知识体系? ...
- antd 验证 动态 required_3分钟短文:十年窖藏,Laravel告诉你表单验证的正确姿势
引言 上一章我讲到了使用FormBuilder让后端开发者快速构建前端表单页面,而为了示例, 直接在store方法内把表单数据一股脑存到了数据库. 这!很!危!险! 本文教你正确地验证用户表单提交的数 ...
- 人人看得懂的ChatGPT技术原理解析
人人看得懂的ChatGPT技术原理解析 编者按:自ChatGPT面世以来,我们在热切挖掘其丰富应用的同时,也在孜孜探求其背后的工作原理. 今天我们为大家带来的文章,深入浅出地阐释了ChatGPT背后的 ...
- 傅里叶变换是什么?一看就懂,写的超级棒!
原文链接:https://zhuanlan.zhihu.com/p/19763358 傅里叶分析之掐死教程(完整版) 一.什么是频域 二.傅里叶级数(Fourier Series)的频谱 三.傅里叶级 ...
- 只有程序员看的懂面试圣经
技术圈 只有程序员看的懂面试圣经|如何拿下编程面试 http://www.epubit.com.cn/article/197 当我最初开始参加编程面试的时候,我所有最心仪的公司都忽视了我.现在回头看那 ...
- 为何“看得懂单词却读不懂句子”
开门见山直奔主题,来,翻译一下下面的话(全部初中词汇,仅从单词角度来说,不难吧): A person is a person through other persons. 怎么样?是不是很难翻译(即使 ...
- 只有程序员看的懂的面试圣经|如何拿下编程面试
只有程序员看的懂的面试圣经|如何拿下编程面试 摘要:当我最初开始参加编程面试的时候,我所有最心仪的公司都忽视了我.现在回头看那个时候,我发现自己当时去参加面试都完全没做任何准备.虽然已经有许多博客文章 ...
- 前端app调起摄像头 只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴 有前端开发经验.但是没有使用过Vue的小伙伴 有过其他编程经验,对前端开发感兴趣的小伙伴 学习本教程之后你将会: 了解 ...
- 用一个例子告诉你gdb调试工具如何使用
用GDB调试程序 GDB概述 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具.或许,各位比较喜欢那种图形界面方式 ...
最新文章
- 记一次使用 Lombok 翻车造成的事故!
- 从一个字符串中剔除连续的字符,只留一个。
- 和包支付的钱哪里来_2019年支付宝年度账单出炉,来看看你究竟花了多少钱
- 使用QuickCHM软件轻松编译CHM格式的文件
- win python 判断 所有 子进程 结束_python 多进程 进程池子进程结束怎么获取
- (转)protein 数据库
- 网红必备神器,抖音短视频去水印秘籍-抖音-快手-微视-全名小视频
- c104win键被锁 ikbc,win10键盘锁住了怎么解开_win10系统键盘被锁定的解决教程
- win10 自带wi-fi热点速度太慢怎么办_win10wifi热点速度极慢如何解决
- Flink On K8S终极实现方案
- 深入Java虚拟机(五)垃圾收集
- 【渝粤教育】电大中专跨境电子商务理论与实务 (17)作业 题库
- Oracle EBS 寄销/VMI(1)--基础设置
- 网站页面静态化(一)初识
- win10安装TeamView 提示rollback framework could not be initialized
- 论文写作 1: 学术论文的基本概念
- 补码一位乘(布斯公式)
- int正数和负数的原码、反码、补码
- 【网络】Wireshark对远程主机抓包|过滤|原理
- 中国筒仓罐市场现状研究分析与发展前景预测报告(2022)
热门文章
- Copy++ 复制 PDF、CAJ 内容时,自动删除空格、空行,以及自动翻译[Win]
- 蓝奏云批量下载v0.3修复版
- android word设计模式,word07设计模式
- ElementUI table组件,表格组件,单击单元格可编辑逻辑
- java xml amp_Javaamp;Xml教程(十一)JAXB实现XML与Java对象转换
- 极致cms1:1精仿资源哟源码
- 源商城系统V1.0仿卡盟
- ollydbg,ring3级别的调试软件
- MS Script Control的 COM
- 企业项目开发中的问题