问题:

  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版本的更多相关文章

  1. react和redux版本不匹配

    1.页面报错Cannot read property 'shape' of undefined 2. 原因为:react版本与react-redux版本不匹配. 1.package.json文件修改该 ...

  2. 使用Redux管理你的React应用

    因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https://github.com/matthew ...

  3. Redux管理你的React应用

    使用Redux管理你的React应用   因为redux和react的版本更新的比较频繁,博客园这里用的redux版本是1.0.1,如果你关心最新版本的使用技巧,欢迎来我的Github查看(https ...

  4. Redux源码分析之基本概念

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  5. Redux源码学习笔记

    https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...

  6. redux源码学习笔记 - createStore

    本篇是学习redux源码的一些记录,学习的redux版本是^4.0.1. 在页面开发时,需要管理很多状态(state),比如服务器响应,缓存数据,UI状态等等···当页面的庞大时,状态就会变的混乱.r ...

  7. 带你逐行阅读redux源码

    带你逐行阅读redux源码 redux版本:2019-7-17最新版:v4.0.4 git 地址:https://github.com/reduxjs/redux/tree/v4.0.4 redux目 ...

  8. 手把手教你撸一套Redux(Redux源码解读)

    Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...

  9. URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'

    今天搭建antd的项目结构,本来项目是一个基础react项目,结果执行 yarn create umi yarn yarn start 项目启动后访问突然报错URIError: Failed to d ...

  10. [修仙之路]React-Redux 金丹篇

    作者:水涛追求技术,但又不失生活的乐趣,过自己想要的生活 React-Redux简介 React-Redux可以使你的React项目拥有全局数据,可以使多个React组件读取到全局数据并且组件中也可修 ...

随机推荐

  1. CCNet: Criss-Cross Attention for Semantic Segmentation 里的Criss-Cross Attention计算方法

    论文地址:https://arxiv.org/pdf/1811.11721v1.pdf  code address: https://github.com/speedinghzl/CCNet 相关论文 ...

  2. R实用小技巧

    输出重定向 # 文本重定向 # cat cat("hello",file="D:/test.txt", append=T) # sink("filen ...

  3. OpenStack搭建Q版只属于计算节点上的环境准备(step6)

    配置NTP服务 1.安装chronyd yum install chrony -y 2.修改配置文件,使计算节点与控制节点同步时间 vim /etc/chrony.conf 注释掉下面四行: #ser ...

  4. python字符串截取、查找、分割

    Python 截取字符串使用 变量[头下标:尾下标],就可以截取相应的字符串,其中下标是从0开始算起,可以是正数或负数,下标可以为空表示取到头或尾. # 例1:字符串截取 str = '1234567 ...

  5. HttpSimpleClient连接服务器

    public class HttpSimpleClient { /** * 发送GET请求. */ static public HttpResult httpGet(String url, List& ...

  6. Share Today

    当问[一生中最大的错误是什么?]时,佛陀回答: 最大的错误就是你以为你还有时间 时间是免费的也是无价的 你无法拥有 但可以花费 而一旦失去 就无法挽回 一般人一生有78年 我们有28.3年在睡觉 几乎 ...

  7. Ignite(三): Ignite VS Spark

    参考:https://www.itcodemonkey.com/article/9613.html gnite 和 Spark,如果笼统归类,都可以归于内存计算平台,然而两者功能上虽然有交集,并且 I ...

  8. python3-基础7

    协程函数 面向过程编程 递归与二分法 内置函数   lambda 模块与包的使用 import from ... import ... 常用模块 ########################### ...

  9. CentOS7下安装Python3并保留Python2

    1. 安装make编译指令的依赖环境 # yum -y install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel ...

  10. TensorFlow-GPU+cuda8+cudnn6+anaconda安装遇到的版本错误

    第一遍装的时候是cuda10+cudnn5.1这个诡异的组合,失败 卸载cuda就是把所有的NVIDIA有关的应用都删掉,c盘文件也都删掉,不用留. 第二遍是cuda8+cudnn5.1.版本还是对不 ...