接上篇 immutable在redux中如何使用

最新推荐文章于 2023-07-31 12:00:52 发布
最新推荐文章于 2023-07-31 12:00:52 发布
阅读量182 收藏
点赞数
分类专栏： react redux npm 文章标签： reactjs es6 npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41548835/article/details/106767372
版权
redux 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
npm
4 篇文章 0 订阅
订阅专栏
react
2 篇文章 0 订阅
订阅专栏

immutable在redux中使用

第一步：npm install redux-immutable --save
创建文件夹与文件来创建redux-immutable

引入redux-immutable并且使用combineReducers进行合并
在这里插入图片描述
在根组件中传递store
在这里插入图片描述
在需要的组件中读取
在这里插入图片描述
redux-immutable修改
通过dispatch调用修改actions
在这里插入图片描述
创建修改操作actions’
在这里插入图片描述

Shmily_zc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
immutable在redux中的使用
01-08
什么是immutable Data？ Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。 imm
immutable 与 React 、 Redux 结合使用小案例
08-16
本项目在下载后直接用 VSCode 打开即可运行，如果出现包未下载的问题，可使用 npm i -save 或 yarn add -s 命令下载本项目中所引入的各类包，如果有报错提示，可联系博主解决 温馨提示：博主使用的 React 版本时 ...
immutable的使用
weixin_33997389的博客
03-10 343
一、什么是immutable immutable是一种持久化数据结构，immutable数据就是一旦创建，就不能更改的数据，每当对immutable对象进行修改的时候，就会返回一个新的immutable对象，以此来保证数据的不可变。 二、immutable的几种数据类型 List: 有序索引集，类似JavaScript中的Array。 Map: 无序索引集，类似JavaScript中...
redux中使用immutable.js
weixin_47594808的博客
07-31 368
1.immutable.js简介 Facebook 工程师 Lee Byron 花费 3 年时间打造，与 React 同期出现，但没有被默认放到 React 工具集里（React 提供了简化的 Helper）。它内部实现了一套完整的 Persistent Data Structure，还有很多易用的数据类型。像 Collection、List、Map、Set、Record、Seq。有非常全面的map、filter、groupBy、reduce``find函数式操作方法。同时 API 也尽量...
immutable的基础使用
weixin_30640769的博客
06-16 137
fromJS:深层次转换，可以将所有的原生JS对象都转换为immutable对象 toJS:深层次转换 将immutable对象转换为原生JS对象let state = immutable.fromJS({ name:"张三", obj:{ username:"123", password:456 }, arr:[1,2,3,4], ab...
在小程序中集成redux/immutable/thunk第三方库
03-29
小程序给我们暴露了两个参数 require 和 module ， require 用来在模块中加载其他模块，module 用来将模块中的方法暴露出去 module.exports = function(){} 所以只要需要让第三方库的代码使用这种形式的 ...
redux-immutable-utils:在Redux中使用不可变的实用程序
05-03
在Redux中使用不可变的实用程序 combineReducers(reducers) 不做关于减速器的假设，而是将它们组合成一个不可变的地图。 import * as reducers from './reducers' ; const reducer = combineReducers ( reducers ...
在小程序中集成redux/immutable/thunk第三方库的方法
01-20
小程序给我们暴露了两个参数 require 和 module ， require 用来在模块中加载其他模块， module 用来将模块中的方法暴露出去 module.exports = function(){} 所以只要需要让第三方库的代码使用这种形式的 export 就...
Immutable在React中的使用
来者往者
05-08 751
日结博客 8.5.18 HZImmutable的运用判断数据是否值相等import { is } from 'immutable' let foo = { a: 'name' } let foo1 = { a: 'name' } console.log(is(foo, foo1)) // true在React中生命周期中运用 shouldComponentUpdate(nextProps = {}...
immutable结合redux的使用
最新发布
学思QAQ的博客
07-31 69
immutable结合redux的使用
在react、redux中immutable.js的使用方法（immutable对象）
初心 - 杨瑞超个人博客
01-08 944
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 官方文档：https://facebook.github.io/immutable-js/docs/#/ ，这个是需要翻墙的噢~ 今天来研究下immutable.js的使用方法： 概述 因为在redux的过程中，我们不能直接改变state数据，需要返回...
redux-immutable not found
brucehongsen的博客
09-01 285
npm install --save react-redux-immutable sudo yarn add react-redux-immutable
immutable和redux-immutable的使用
nidaye666666的博客
02-02 659
immutable和redux-immutable的使用 npm install immutable npm install redux-immutable --save import { combineReducers} from "redux"; import { reducer as reducer_header } from "../header/store"; export def...
immutable是什么,优缺点以及如何在redux中使用
shadowfall的博客
03-11 1358
immutable的出现是为了性能优化，将可共享的数据提出，只更新改变的数据。减少性能消耗 什么是不可变数据 不可变数据 (Immutable Data )就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。Immutable 实现的原理是持久化数据结构（ Persistent Data Structure），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能
redux 持久化(redux-persist) 结合 immutable 使用问题
kzj0916的博客
08-07 1641
最近学习了redux以及react-redux的结合使用确实让redux在react中更好的输出代码啦~但是考虑到项目的各种需求，我们还是需要对redux进行深一步的改造，让其能更好的满足我们的日常开发，大大提高我们的开发效率。今天给大家推荐两个好用的功能包，并解决一个它们结合使用存在的问题。...
React-Redux技术栈——之redux-form详解
weixin_34315189的博客
07-07 982
React中没有类似Angular那样的双向数据绑定，在做一些表单复杂的后台类页面时，监听、赋值、传递、校验时编码相对复杂，满屏的样板代码伤痛欲绝，故引入可以解决这些问题的 redux-form (v6) 模块。本文大致翻译了官方文档一些比较重要的地方，结合官方Demo加入了一些特性，有些官方跑不起来的地方也进行了优化。 项目地址: h...
Immutable的基本使用
qq_44472790的博客
04-25 1502
一、Immutable简介 功能用法：Immutable Data 就是一旦创建，就不能再被更改的数据。对 Immutable 对象的任何修改或添加删除操作都会返回一个新的 Immutable 对象。 Immutable 实现的原理:是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy ...
浅谈immutable的使用方法
大口喝脉动的博客
08-02 518
在聊immutable之前我们先思考一个问题。敲代码时经常会使用深拷贝的方法，但是一般的深拷贝方法是把所有的数据节点都拷贝下来，此时没有改变的数据也会被拷贝一份。这就会造成性能的消耗。我们该如何解决性能消耗问题。 此时我们就需要一个结构共享的方案。什么是结构共享？简单来说在拷贝时，我们拷贝改变的数据节点极其父节点，而没有改变的数据我们就直接拿过来，不进行拷贝，这就是结构共享。而在项目中我们就需要immutable这个工具来实现结构共享。 Immutable数据是一个不可变数据，就是一旦创建，就不能再被
immutable.js 怎么使用
05-28
Immutable.js是一个JavaScript库，用于创建不可变的数据结构。它提供了一组用于创建、操作和查询这些数据结构的API。以下是使用Immutable.js的一些常见步骤： 1. 安装Immutable.js 可以使用npm或yarn安装Immutable.js： ```bash npm install immutable ``` ```bash yarn add immutable ``` 2. 导入Immutable.js 在需要使用Immutable.js的文件中，导入Immutable.js的核心模块： ```js import Immutable from 'immutable'; ``` 3. 创建不可变的数据结构 使用Immutable.js的函数来创建不可变的数据结构，例如： ```js const data = Immutable.fromJS({ foo: { bar: 1 } }); ``` 这将创建一个不可变的Map对象，其中包含一个名为`foo`的键，它的值是包含一个`bar`键和值为1的对象。 4. 操作不可变的数据结构 使用Immutable.js的方法来对不可变数据结构进行操作，例如： ```js const newData = data.setIn(['foo', 'bar'], 2); ``` 这将返回一个新的Immutable对象，其中`foo.bar`的值已经被更新为2。需要注意的是，原始的数据结构并没有被修改，而是返回了一个新的对象来代表更新后的值。 5. 查询不可变的数据结构 使用Immutable.js的方法来查询不可变数据结构，例如： ```js const value = data.getIn(['foo', 'bar']); ``` 这将返回`foo.bar`的值，即1。 以上就是使用Immutable.js的基本步骤。需要注意的是，由于Immutable.js创建的数据结构是不可变的，因此在对其进行操作时需要使用Immutable.js提供的方法，而不是原生的JavaScript方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值