一、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. Immutable.js 以及在 react+redux 项目中的实践

    来自一位美团大牛的分享,相信可以帮助到你. 原文链接:https://juejin.im/post/5948985ea0bb9f006bed7472?utm_source=tuicool&ut ...

  2. React.js 小书 Lesson17 - 前端应用状态管理 —— 状态提升

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson17 转载请注明出处,保留原文链接和作者信息. 上一个评论功能的案例中,可能会有些同学会对一个 ...

  3. 你再也不用使用 Redux、Mobx、Flux 等状态管理了

    Unstated Next readme 的中文翻译 前言 这个库的作者希望使用 React 内置 API ,直接实现状态管理的功能.看完这个库的说明后,没有想到代码可以这个玩.短短几行代码,仅仅使用 ...

  4. Trident中使用HBase进行状态管理

    1.使用的类 2.使用HBaseMapState 3.使用状态管理 使用的状态管理还要看Spout StateFactory factory1 = HBaseMapState.opaque(opts1 ...

  5. React - redux, jsx中写js示例

    { this.state.avatarSource === null ? <Text>Select a Photo</Text> : <Image style={styl ...

  6. 教你如何在React及Redux项目中进行服务端渲染

    服务端渲染(SSR: Server Side Rendering)在React项目中有着广泛的应用场景 基于React虚拟DOM的特性,在浏览器端和服务端我们可以实现同构(可以使用同一份代码来实现多端 ...

  7. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

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

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

  9. 对于React各种状态管理器的解读

    首先我们要先知道什么是状态管理器,这玩意是干啥的? 当我们在多个页面中使用到了相同的属性时就可以用到状态管理器,将这些状态存到外部的一个单独的文件中,不管在什么时候想使用都可以很方便的获取. reac ...

随机推荐

  1. C 调试 gdb常用命令

    gdb常用命令: [root@redhat home]#gdb 调试文件:启动gdb (gdb) l :(字母l)从第一行开始列出源码 (gdb) break n :在第n行处设置断点 (gdb) b ...

  2. Django中使用djangorestframework产生Token

    修改settings.py: INSTALLED_APPS添加rest_framework 产生Token from rest_framework.authtoken.models import To ...

  3. const定义的并非是常量,而是常量索引

    我第一次看const的时候,记忆中对const的定义是,定义常量. 后经过研究,定义的并非常量,而是常量索引. 有时候会遇到使用const定义数组的情况 const arr = [] arr.push ...

  4. 题解 P3166 【[CQOI2014]数三角形】

    做完之后看了看题解,怎么一篇和我思路一样的也没有...我好慌啊qwq(所以一定是窝太弱了看不懂dalao的思路) 好吧窝的方法确实很奇怪: 核心代码只有3行 输入 循环 输出 一气呵成 是题解中的豪杰 ...

  5. wepy-数据双向绑定input

    初入wepy,发现wepy和vue神似,但还是有不一样的地方,例如v-model数据双向绑定 场景: 一个input搜索框,用户输入内容,点击“叉叉”按钮,输入的内容全部清空,这是一个很常见的场景 j ...

  6. Java——常用类(Enum)

    [枚举类型]  <1>只能取特定值中的一个.  <2>使用enum关键字.  <3>是java.lang.Enum类型.   [程序分析]    public en ...

  7. Linux基础命令及使用帮助

    一.内部命令 内置命令(builtin):由shell程序自带的命令 help:查看内部命令 enable -n command 禁用某内部命令 enable -n 查看全部被禁用的命令 enable ...

  8. 10 Django与Ajax

    知识预览 1. Ajax 2. 文件上传 Ajax Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用J ...

  9. 一台电脑多个git使用 push 时候出现denied

    http://my.oschina.net/silentboy/blog/220158 当一台电脑上多个git account 的时候, 出现如下问题, $ git push origin maste ...

  10. mysqladmin processlist; show processlist/status/open tables/engine/variables/table status/columns/grants/index/privileges/innodb status/logs/warnings/////; 结果筛选

    mysqladmin showprocesslist可查看完整sql需要权限. SHOW PROCESSLIST显示哪些线程正在运行.您也可以使用mysqladmin processlist语句得到此 ...