问题:

  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. 《python for data analysis》第九章,数据聚合与分组运算

    # -*- coding:utf-8 -*-# <python for data analysis>第九章# 数据聚合与分组运算import pandas as pdimport nump ...

  2. 树莓派3 Raspberry系统安装samba

    默认Raspberry不自带samb,需要手动安装. 如果默认的rasp源不好用的话,可以使用下面从网上找的: deb http://mirrors.cqu.edu.cn/Raspbian/raspb ...

  3. Unity 3D类结构简介

    趁着周末,再来一发.对于Unity3D,我也是刚开始学习,希望能够与大家多多交流.好了,废话不多说,下面继续. 本篇文章使用C#进行举例和说明.关于Unity 3D编辑器中的各种窗口,网上有很多资料了 ...

  4. 使用git进行版本控制

    一.git基本介绍 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git是目前世界上最先进的分布式版本控制系统. 与常用的版本控制工具 CVS, Subversion 等 ...

  5. 【转】Syncthing – 数据同步利器---自己的网盘,详细安装配置指南,内网使用,发现服务器配置

    Syncthing – 数据同步利器---自己的网盘,详细安装配置指南,内网使用,发现服务器配置 原贴:https://www.cnblogs.com/jackadam/p/8568833.html ...

  6. Kettle解决方案: 第二章 Kettle基本概念

    2概述 设计模块最主要的操作分为: 转换和作业 选择转换和作业后就可以选择对应主对象树和核心对象 主对象树大同小异 核心对象是不同的 比如转换需要用到的CSV表输入, 表输入等都在这里可以选择 而作业 ...

  7. UEditor富文本简单使用

    简单使用编辑器UEditor(录入)步骤: 1,下载Ueditor插件(文中使用1.4.3版本),添加js引用. <script src="../js/ueditor/ueditor. ...

  8. ES - dynamic field mapping

    Dynamic field mapping 1.我们向es提交一个json对象进行索引,es会对json字段和索引字段进行字段类型适配. 规则如下: 2.string字段的转换规则 当date det ...

  9. 和2018年年初做管理系统的不同(vuex)

    从2017年底开始做公司批改后台系统(服务内部人员对熊猫小课用户的作业进行批改.对批改员工资结算等)到教务系统(服务于内部人员对熊猫小课等移动端产品的内容进行配置等).ai-boss系统(服务于内部人 ...

  10. springboot集成schedule

    背景 在项目开发过程中,我们经常需要执行具有周期性的任务.通过定时任务可以很好的帮助我们实现. 我们拿常用的几种定时任务框架做一个比较: 从以上表格可以看出,Spring Schedule框架功能完善 ...