41_redux_counter应用_react-redux版本
问题:
redux与react组件的代码耦合度太高
编码不够简洁
react-redux
1)是一个react插件库
下载:
npm install --save react-redux@5.0.6
(当前最新版本为7,6版本后的会报错)
React-Redux将所有的组件分为两类:
1)UI组件
只负责UI的成像,不带有业务逻辑
通过props接收数据(一般数据和函数)
不使用任何Redux的API
一般保存在components文件夹下
2)容器组件
负责管理数据和业务逻辑,不负责UI的呈现
使用Redux的API
一般保存在containers文件夹下
redux项目结构:
结构很固定,redux文件夹下面有action-types.js、actions.js、reducers.js、store.js
相关API:
1)Provider
让所有组件都可以得到state数据
<Provider store={store}>
<APP/>
</Provider>
2)connect() //关键
用于包装UI组件生成容器组件
import { connect } from 'react-redux'
connect(
mapStateToprops,
mapDispatchToProps
)(Counter)
3)mapStateToprops() //它是对象
将外部的数据(即state对象)转换为UI组件的标签属性
const mapStateToprops = function (state) {
return {
value:state
}
}
4)mapDispatchToProps
将分发action的函数转换为UI组件的标签属性
简洁语法可以直接指定为actions对象或包含多个action方法的对象
41_redux_counter应用_react-redux版本的更多相关文章
- react和redux版本不匹配
1.页面报错Cannot read property 'shape' of undefined 2. 原因为:react版本与react-redux版本不匹配. 1.package.json文件修改该 ...
- 使用Redux管理你的React应用
因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...
- Redux管理你的React应用
使用Redux管理你的React应用 因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...
- Redux源码分析之基本概念
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- Redux源码学习笔记
https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...
- redux源码学习笔记 - createStore
本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1. 在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱.r ...
- 带你逐行阅读redux源码
带你逐行阅读redux源码 redux版本:2019-7-17最新版:v4.0.4 git 地址:https://github.com/reduxjs/redux/tree/v4.0.4 redux目 ...
- 手把手教你撸一套Redux(Redux源码解读)
Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...
- URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
今天搭建antd的项目结构,本来项目是一个基础react项目,结果执行 yarn create umi yarn yarn start 项目启动后访问突然报错URIError: Failed to d ...
- [修仙之路]React-Redux 金丹篇
作者:水涛追求技术,但又不失生活的乐趣,过自己想要的生活 React-Redux简介 React-Redux可以使你的React项目拥有全局数据,可以使多个React组件读取到全局数据并且组件中也可修 ...
随机推荐
- 《python for data analysis》第九章,数据聚合与分组运算
# -*- coding:utf-8 -*-# <python for data analysis>第九章# 数据聚合与分组运算import pandas as pdimport nump ...
- 树莓派3 Raspberry系统安装samba
默认Raspberry不自带samb,需要手动安装. 如果默认的rasp源不好用的话,可以使用下面从网上找的: deb http://mirrors.cqu.edu.cn/Raspbian/raspb ...
- Unity 3D类结构简介
趁着周末,再来一发.对于Unity3D,我也是刚开始学习,希望能够与大家多多交流.好了,废话不多说,下面继续. 本篇文章使用C#进行举例和说明.关于Unity 3D编辑器中的各种窗口,网上有很多资料了 ...
- 使用git进行版本控制
一.git基本介绍 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git是目前世界上最先进的分布式版本控制系统. 与常用的版本控制工具 CVS, Subversion 等 ...
- 【转】Syncthing – 数据同步利器---自己的网盘,详细安装配置指南,内网使用,发现服务器配置
Syncthing – 数据同步利器---自己的网盘,详细安装配置指南,内网使用,发现服务器配置 原贴:https://www.cnblogs.com/jackadam/p/8568833.html ...
- Kettle解决方案: 第二章 Kettle基本概念
2概述 设计模块最主要的操作分为: 转换和作业 选择转换和作业后就可以选择对应主对象树和核心对象 主对象树大同小异 核心对象是不同的 比如转换需要用到的CSV表输入, 表输入等都在这里可以选择 而作业 ...
- UEditor富文本简单使用
简单使用编辑器UEditor(录入)步骤: 1,下载Ueditor插件(文中使用1.4.3版本),添加js引用. <script src="../js/ueditor/ueditor. ...
- ES - dynamic field mapping
Dynamic field mapping 1.我们向es提交一个json对象进行索引,es会对json字段和索引字段进行字段类型适配. 规则如下: 2.string字段的转换规则 当date det ...
- 和2018年年初做管理系统的不同(vuex)
从2017年底开始做公司批改后台系统(服务内部人员对熊猫小课用户的作业进行批改.对批改员工资结算等)到教务系统(服务于内部人员对熊猫小课等移动端产品的内容进行配置等).ai-boss系统(服务于内部人 ...
- springboot集成schedule
背景 在项目开发过程中,我们经常需要执行具有周期性的任务.通过定时任务可以很好的帮助我们实现. 我们拿常用的几种定时任务框架做一个比较: 从以上表格可以看出,Spring Schedule框架功能完善 ...