一、Redux与组件

react-redux是一个第三方插件使我们在react上更方便的来使用redux这个数据架构

React-Redux提供connect方法,用于从UI组件生成容器组件,connect的意思就是将两种组件连起来

参考文章:https://github.com/reduxjs/react-redux

二、react-redux的基本用法

(1)、引入

import {Provider} from "react-redux";

在根组件外层嵌套一个Provider.   Provider的作用就是将store传递给每一个子组件,每一个子组件就都可以使用store了,不需要重复的在组件中引入store

(2)、connect进行连接

(1)、在子组件中引入connect

import { connect } from "react-redux";

(2)进行连接

export default connect(mapStateToProps)(组件名称)

connect()():

第一个括号里面有三个参数

第一个参数:mapStateToProps

解释:

mapStateToProps其实就是一个规则,把store里面的state映射到当前组件的 props中

第二个参数:mapDispatchToProps

解释:

(1)、mapDispatcherToProps 这个方法用来修改数据,这个方法中有一个参数为dispatch.

(2)、如果说mapStateToProps是将store的数据拿到当前组件使用,那么mapDispatcherToProps就是提高了一些方法让你如果进行数据的修改(方法需要自己去写,依旧要把action返回给Store),这个方法被映射的this.props中。dispatch是用来发送action的

第二个括号:需要传递组件名称

mapStateToProps这个函数的主要用途就是将state中的items数据映射到prop中的items中去,简单来说就是我们调用公共的数据store。但是频繁的在组件中引入store操作过于麻烦,因此我们将当前list组件进行了一个数据连接,这个数据就是从store中的state映射到props中

mapStateToProps

作用:

建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系。

mapStateToProps会订阅 Store,每当state更新的时候,就会自动执行,重新计算 UI 组件的参数,从而触发 UI 组件的重新渲染

调用的时候this.props.【key值】

mapDispatchToProps

作用:

用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说,它定义了哪些用户的操作应该当作 Action,传给 Store。它可以是一个函数,也可以是一个对象

mapDispatchProps的用法

const mapDispatchProps = (dispatch)=>({

函数名称:function(){

dispatch(action)

}

})

mapDispatchProps函数需要返回出去一个函数 这个函数中用dispatch传递一个action

最终子组件变成了UI组件 connect返回最终的容器组件,react-redux建议我们把所有的数据都放在store中

调用:this.props.函数名称()

【巷子】---react-redux---【react】的更多相关文章

  1. react + redux 完整的项目,同时写一下个人感悟

    先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...

  2. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  3. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  4. webpack+react+redux+es6开发模式

    一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...

  5. react+redux教程(六)redux服务端渲染流程

    今天,我们要讲解的是react+redux服务端渲染.个人认为,react击败angular的真正“杀手锏”就是服务端渲染.我们为什么要实现服务端渲染,主要是为了SEO. 例子 例子仍然是官方的计数器 ...

  6. react+redux教程(五)异步、单一state树结构、componentWillReceiveProps

    今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...

  7. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

  8. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  9. react+redux官方实例TODO从最简单的入门(1)-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  10. 重写官方TodoList,对于初学react+redux的人来说,很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

随机推荐

  1. lftp的安装

    lftp的安装 安装依赖的包 yum -y install make  readline-devel  gnutls* 解压上传的包 tar -jxf lftp-4.0.1.tar.bz2 cd到解压 ...

  2. Python 爬虫工具 —— fake_useragent

    服务器为避免爬虫工具无休止的请求,以减轻负载,会对 user agent 进行校验,即判断某一 user-agent 是否不断地进行请求.可采用如下方式进行绕过服务器的校验. UserAgent_Li ...

  3. JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;

    学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法 如何创建一个日期对象 语法:new Date(); 功能:创建一个日期时间对象 ...

  4. 【计算机视觉】seetaFace

    class impl class FaceDetection::Impl { public: Impl() : detector_(new seeta::fd::FuStDetector()), sl ...

  5. 网络流Ek算法

    例题:  Flow Problem HDU - 3549 Edmonds_Karp算法其实是不断找增广路的过程. 但是在找的过程中是找"最近"的一天增广路, 而不是找最高效的一条增 ...

  6. get新技能:上传了 flv 或 MP4 文件到服务器,可访问总是出现 “无法找到该页”的 404 错误

    为什么我上传了 flv 或 MP4 文件到服务器,可访问总是出现 “无法找到该页”的 404 错误 为什么我上传了 flv 或 MP4 文件到服务器,可输入正确地址通过协议来访问总是出现 “无法找到该 ...

  7. MVC分别代表的含义

    MVC 是一种将应用程序的逻辑层和表现层进行分离的方法.ThinkPHP 也是基于MVC设计模式的.MVC只是一个抽象的概念,并没有特别明确的规定,ThinkPHP中的MVC分层大致体现在:模型(M) ...

  8. Chrome程序及数据位置变更到非系统盘

    Chrome浏览器在Windows系统上安装过程,没有设置安装位置的步骤,所以默认是安装在C盘的.并且,若Chrome作为主要浏览器使用,随着时间的积累,数据文件会非常多.增加系统盘的负荷. Wind ...

  9. Linux中查看显卡硬件信息

    Linux中查看显卡硬件信息 https://ywnz.com/linuxjc/67.html lspci -vnn | grep VGA -A 12lshw -C display 查看当前使用的显卡 ...

  10. c++期末考

    1. 谁不及格? Problem:A Time Limit:1000ms Memory Limit:65535K Description 聪聪的班主任王老师最近有点忙,可是他又是一位非常细心的老师,每 ...