具体代码可以查看我的代码仓库

https://gitee.com/haomYGH/Web20/tree/master/010-React/014-redux-immutable

页面展示

要处理的问题：操作上面的组件影响到了下面的组件？？？

解决方法：

.........................................................................................................

如果页面需要使用相同的组件，我们需要保证两点不同，
1.组件名
2.actiion.type不同
这样当点击页面派发action的时候，才不会相互影响

......................................................................................................

具体实现：修改组件派发的action中的type

就是当我们使用redux-redux管理数据时

这一步相当于把所有子组件的reducer放在了同一个文件下。

所以当派发action时，如果里面的type相同，程序就会走到对应的判断语句里，从而修改各个组件的state

最后注意：组件获取的是自己组件的数据

react引入相同组件时互不影响的更多相关文章

  1. react 项目实战（十）引入AntDesign组件库

    本篇带你使用 AntDesign 组件库为我们的系统换上产品级的UI! 安装组件库 在项目目录下执行:npm i antd@3.3.0 -S 或 yarn add antd 安装组件包 执行:npm ...

  2. 小程序 components 下的组件引入字体图标时样式不生效

    在组件内的样式在引入一遍 字体图标样式, pages 下的组件不受影响,全局引入字体图标样式即刻,不需要再次引入

  3. 纯粹极简的react状态管理组件unstated

    简介 unstated是一个极简的状态管理组件 看它的简介:State so simple, it goes without saying 对比 对比redux: 更加灵活(相对的缺点是缺少规则,需要 ...

  4. React jQuery公用组件开发模式及实现

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  5. React Native交互组件之Touchable

    React Native交互组件之Touchable:只要在组件外面包一个Touchable组件就可以实现点击交互. TouchableHighlight:高亮触摸 当点击时,组件的透明度会改变,可以 ...

  6. react - 解刨组件的多种写法

    一,原始的createClass写法 对于写react组件,很多人第一印象往往是createClass,这是因为createClass是react组件最原始的写法,基本每个学react的人都是接触这种 ...

  7. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  8. React笔记：组件（3）

    1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...

  9. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

随机推荐

  1. 实战SpringCloud通用请求字段拦截处理

    背景 以SpringCloud构建的微服务系统为例,使用前后端分离的架构,每个系统都会提供一些通用的请求参数,例如移动端的系统版本信息.IMEI信息,Web端的IP信息,浏览器版本信息等,这些参数可能 ...

  2. python 魔法方法总结

    目录 一.__str__ 二.__repr__ 三.__format__ 四.__del__ 五.__dict__和__slots__ 六.__item__.__attr__系列 七.__init__ ...

  3. gulp-less打包后calc属性计算不准确的问题

    .step-item{ width: calc((100% - 50px) / 2); &:nth-child(2){ margin-right: 0; } } 这样直接写的话,编译时会直接给 ...

  4. 百万级别数据Excel导出优化

    前提 这篇文章不是标题党,下文会通过一个仿真例子分析如何优化百万级别数据Excel导出. 笔者负责维护的一个数据查询和数据导出服务是一个相对远古的单点应用,在上一次云迁移之后扩展为双节点部署,但是发现 ...

  5. shell专题（九）：函数

    9.1 系统函数 1．basename基本语法 basename [string / pathname] [suffix]   (功能描述:basename命令会删掉所有的前缀包括最后一个(‘/’)字 ...

  6. hihoCoder 1037 数字三角形 最详细的解题报告

    题目来源:hihoCoder 1037 数字三角形 解题思路:请好好看看 提示一.提示二.提示三 具体算法(java版,可以直接AC) import java.util.Scanner; public ...

  7. vue 集成html5 plus

    首先要安装一个包 vue-html5plus npm i vue-html5plus -S 然后配置这个文件 在main.js添加一串代码 var onPlusReady = function (ca ...

  8. 服务注册与发现【Eureka】- Eureka简介

    什么是服务治理 SpringCloud 封装了 Netflix 公司开发的 Eureka 模块来 实现服务治理. 在传统的rpc远程调用框架中,管理每个服务与服务之间依赖关系比较复杂,管理比较复杂,所 ...

  9. 通过cmd进入指定D盘下的某个文件夹

    有时候我们在使用电脑的时候,想使用cmd命令提示符,进入d盘,怎么操作呢,下面来分享一下方法 案例描述:如果进入D盘下的test文件夹(D:\test) 1.win10系统环境下,点击搜索输入[cmd ...

  10. Pull后产生多余的log（Merge branch 'master' of ...）

    第一步: git reset --hard 73d0d18425ae55195068d39b3304303ac43b521a 第二步: git push -f origin feature/PAC_1 ...