react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular、Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它。
这篇主要讲解在React中使用Redux,首先是安装。
安装React Redux
yarn add redux
yarn add react-redux
有两个概念:
1.容器组件(Container Components)
2.展示组件(Presentational Components)
展示组件
- 更关注数据展示,所以会写一些DOM嵌套和CSS
- 通常不依赖Redux,直接从props中获取数据
- 通常没有state,偶尔会用state来保存一些展示状态,如class等
- 交互也通过props回调发起,不直接发起action
容器组件
- 通常作为数据源,做数据分发工作
- 依赖Redux
- 通过和store交互进行数据变更
- 通过react-redux生成
在我们的项目中,一般来说,会编写很多展示组件,少量的容器组件来包裹这些展示组件。
接下来写一个简单的计数器应用,先来划分容器组件和展示组件。
计数器有三个按钮,加、减、重置;一个展示区。
由于按钮既要触发action,又要负责展示,所以需要做成混合组件。
先来编写展示组件,就是显示一下当前计数。
import React from 'react';
const Counter = ({
count
}) => (
<p>当前计数为:<span style={{color: 'red'}}>count</span></p>
)
export default Counter;
一般来说,容器组件就是通过store.subscribe传入回调,订阅store的变化,再去把值通过props传入各个组件中。
在react-redux中实现了connect方法,它生成一个高阶组件,就是前面提到的容器组件。这个方法做了性能优化避免不必要的重复渲染,建议使用该方法。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
mapStateToProps是一个Function,用来监听Redux Store的变化,将store的值,映射为对应的props属性。
const mapStateToProps = ({count}) => {count};
// 或者
const mapStateToProps2 = (state) => {
count: state.count
}
接下来生成一个容器组件。
import { connect } from 'react-redux';
const ConnectCounter = connect(
mapStateToProps
)(Counter);
export default ConnectCounter;
接下来是按钮组件,按钮组件既需要展示,又有数据交互,做成混合组件。
由于,需要dispatch,所以需要给connect传入第二个参数。
mapDispatchToProps可以是Object或者Function。用来将dispatch映射到props上。
const mapDispatchToProps = dispatch => {
return {
plus: () => dispatch({
type: 'PLUS'
})
}
}
// 或者结合上篇提到的bindActionCreators合成一个对象
function plus() {
return {
type: "PLUS"
};
}
function minus() {
return {
type: "MINUS"
};
}
const mapDispatchToProps2 = dispatch => {
return bindActionCreators({ plus, minus }, dispatch)
}
import React from 'react';
let Button = ({plus, minus}) => {
return (
<>
<button onClick={plus}>{'plus'}</button>
<button onClick={minus}>{'minus'}</button>
</>
)
};
Button = connect(()=>{}, mapDispatchToProps2)(Button);
export default Button;
最后,提供一个Provider用来提供全局store。完整例子在这里-codesandbox。
感谢阅读。
react系列(五)在React中使用Redux的更多相关文章
- react系列一,react虚拟dom如何转成真实的dom
react,想必作为前端开发一定不陌生,组件化以及虚拟dom使得react成为最受欢迎额前端框架之一.我们知道react是基于虚拟dom的,但是什么是虚拟dom呢,其实就是一组js对象,那么我们今天就 ...
- mysql系列五、mysql中having的用法
HAVING 子句对 GROUP BY 子句设置条件的方式与 WHERE 和 SELECT 的交互方式类似.WHERE 搜索条件在进行分组操作之前应用:而HAVING 搜索条件在进行分组操作之后应用. ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- 在react中使用redux并实现计数器案例
React + Redux 在recat中不使用redux 时遇到的问题 在react中组件通信的数据是单向的,顶层组件可以通过props属性向下层组件传递数据,而下层组件不能向上层组件传递数据,要实 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- React Native 系列(五) -- 组件间传值
前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
- React Native 系列(五)
前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...
随机推荐
- jquery居中窗口-页面加载直接居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- require'模块化jquery和angular问题
require 模块化开发问题,正常自己写的模块 是exports 导出一个模块 //模块化引入jquery 不同和问题 require 引入jquery swiper .... 插件和库的时候需要 ...
- kafka controller重构
Kafka Controller 是 Kafka 的核心组件,在前面的文章中,已经详细讲述过 Controller 部分的内容.在过去的几年根据大家在生产环境中应用的反馈,Controller 也积累 ...
- Android碎笔录2——按键的点击变色和圆角实现
android的Button默认写出来之后都是方形的直角,并且点击感很不明显,只要在drawable中加上一个xml就能解决这个问题: <?xml version="1.0" ...
- 一、CSS实现横列布局的方法总结
一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...
- C++ *this与this的区别(系个人转载,个人再添加相关内容)
转载地址:http://blog.csdn.net/stpeace/article/details/22220777 return *this返回的是当前对象的克隆或者本身(若返回类型为A, 则是克隆 ...
- How to import Django DB operations out of Django projects
i am not familiar with DB opertions. usually i stroe data to txt and other formats. as DB is more an ...
- js前台实现上传图片的预览
网上这样的插件一大堆,不过还是谈下js下代码的实现,加深这方面的理解. 当然也没有一种方式就可以完事的情形,主要就两种方面来处理: 1.file API的filereader接口完成(支持的浏览器:I ...
- SQLServer 2008 新增T-SQL 简写语法
1.定义变量时可以直接赋值 DECLARE @Id int = 5 2.Insert 语句可以一次插入多行数据 INSERT INTO StateList VALUES(@Id, 'WA'), (@I ...
- SQL Server ->> Memory Allocation Mechanism and Performance Analysis(内存分配机制与性能分析)之 -- Minimum server memory与Maximum server memory
Minimum server memory与Maximum server memory是SQL Server下配置实例级别最大和最小可用内存(注意不等于物理内存)的服务器配置选项.它们是管理SQL S ...