reselect-redux中间件使用总结

最新推荐文章于 2023-07-25 10:12:53 发布
最新推荐文章于 2023-07-25 10:12:53 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skybiut/article/details/88796122
版权
本文总结了reselect库在Redux应用中的作用，重点介绍了createSelector API，它用于创建记忆化的选择器，减少不必要的计算。当state变化时，reselect通过比较输入选择器的值来决定是否执行变换函数，提高性能。同时提到了createStructuredSelector的用法，它提供了一种更便捷的方式来组织和映射输入选择器，可用于mapStateToProps中。
摘要由CSDN通过智能技术生成

为什么使用reselect

mapStateToProps调用其中函数去计算某个状态。这个状态在每一次组件更新的时候都会重新计算。如果state树的结构比较大或者运算复杂,每一次组件更新的时候都进行计算的话，将会导致性能问题.Reselect能够帮助redux来避免不必要的重新计算过程。
reselect主要API使用

  • createSelector(…inputSelectors|[inputSelectors],resultFunc)
    函数createSelector来创建一个记忆selectors。createSelector接受一个或者多个selectors,或者一个selectors数组,计算他们的值并且作为参数传递给resultFunc。如果Redux的state发生改变造成input-selector的值发生改变,selector会调用变换函数,依据input-selector做参数,返回一个结果.如果input-selector返回的结果和前面的一样,那么就会直接返回有关state,会省略变换函数的调用.经过createSelector创建的selector应该是immutable(不变的).（由此可见在项目里与Immutble.js
    可以完美配合）
    示例如下：
    在这里插入图片描述
    
  • createStructuredSelector({inputSelectors}, selectorCreator =
    createSelector)

在普通的模式下使用createStructuredSelector函数可以提

最低0.47元/天 解锁文章
skybiut
关注
专栏目录
Redux 中间件
qt的博客
02-10 214
中间件概念 什么是中间件 中间件本质是就是一道函数，redux允许我们通过中间件的方式扩展和增强redux的应用，体现在action的处理逻辑上， 加载中间件之后，action会先被中间件处理，中间件在返回给reducer 开发redux的中间件 源码地址：https://github.com/qifutian/learngit/tree/main/redux%E5%8F%8A%E4%B8%AD%E9%97%B4%E4%BB%B6/react-redux-guide redux的中间件本质是一道函数，
用reselect提高数据获取性能
AnitaSun的博客
06-27 374
引入 获取当前应该显示的待办事项，就是根据Redux Store状态树上的todos和filter两个字段上的值计算出来。但这个计算过程要遍历todos字段上的数组，当数组比较大的时候，对于TodoList组件的每一次重新渲染都重新计算一遍，就会显得负担过重了。 两阶段选择过程 如果Redux Store状态树上代表所有待办事项的todos字段没有变化，而且代表当前过滤器的filter字段也没有变化，那么实在没有必要重新遍历整个todos数组来计算一个新的结果 reselect库的工作原理：只要相关
React性能优化：reselect
weixin_34292959的博客
05-19 629
项目地址：reduxjs/reselect 轮子作用：减少不必要的数据计算。 适用场景：从redux store中取数据的时候。 在一个大型的项目中，我们会在store中保存很多数据，同时也会有很多的大小组件。不同的组件需要不同的数据，所以我们保存在store中的数据往往是很完整和庞大的，在存进store之前都不会对从服务器请求回来的数据进行过多处理。 而我们每一个组件所需要的数据可能都是不同的，...
Reselect的学习以及一些思考
qxy_XWM的博客
09-06 599
Reselect简介前言正文思考`普通写法``进阶写法` 前言 我们平时在使用react-redux时，用到最多的函数大概就是mapStateToProps和mapDispatchToProps。其中， mapStateToProps函数允许我们将 store 中的数据作为 props 绑定到组件上，它的第一个参数就是 Redux 的整个状态树(state)： const Counter = pr...
Redux的中间件-Reselect（缓存）
蜗牛不会跑
10-31 2506
本文是翻译Redux的一个中间件文档.Redux是React的一个数据层,React组件的state有关逻辑处理都被单独放到Redux中来进行,在state的操作流程中衍生了很多中间件,Reselect这个中间件要解决的问题是:`在组件交互操作的时候,state发生变化的时候如何减少渲染的压力.在Reselect中间中使用了缓存机制,这个机制可以在javascript的模式设计中刚看到介绍,这里...
reselect中createSelector的用法及github代码解读
无聊写写~
06-16 4148
reselect中createSelector的用法及github代码解读 reselect是一个redux中间件，github上有对应的文档：https://github.com/reduxjs/reselect createSelector的使用例程如下： import { createSelector } from 'reselect' const shopItemsSelector = state => state.shop.items const taxPercentSelector =
reactjs-redux-saga-reselect-starterkits：使用TypeScript的ReactJS项目的基本模板
02-16
4. **Redux Saga**：Redux Saga是Redux的中间件，用于处理副作用（如异步操作）。它采用Generator函数，使得异步逻辑更加清晰易读。相比于Redux Thunk，Redux Saga提供了更优雅的错误处理和更简单的测试方案。 5. *...
todo-redux-saga:使用React，Redux传奇，不可变和选择器的Todo应用
03-27
【Redux Saga】Redux Saga是一个Redux中间件，用于处理应用中的副作用，如异步操作。它通过生成器函数（generators）来监听Redux的actions，并在适当的时候触发相应的业务逻辑。这使得应用的逻辑更易于测试和理解，...
实战:自定义简单版redux, enhancer与react-redux
qubes的专栏
06-23 237
[redux]core[redux]enhancer[redux]applyMiddleware[react-redux]core 在redux基础上(getState,dispatch,subscribe)小结redux核心功能：提供getState,dispatch,subscribe 这几个api给开发者使用yarn add redux 指定4.1.2版本创建store组件调用中间件功能：自定义redux实现 createStore，，，创建简单版store:创建实用版store:组件调用：不变同上简
React-Redux
03-27
虽然Redux本身并不处理副作用，但结合使用如redux-thunk或redux-saga这样的中间件，可以方便地处理异步操作和副作用，如API调用。 9. **最佳实践**： - 尽量减少使用`connect`，考虑使用Hooks替代。 - 保持...
React Toolkit
weixin_43604021的博客
09-28 1723
React Toolkit
如何选择建立索引count_建立有效的重新选择选择器
weixin_26723981的博客
08-17 280
如何选择建立索引countReselect is a key component of any architecture utilizing the Redux pattern. It plays a big role in delivering the right data to each component as well as helping inform React when to re-...
Redux之可记忆的Selector
arvin_top的博客
12-16 2102
如果 state tree 非常大，或者计算量非常大，每次更新都重新计算可能会带来性能问题。Reselect 能帮你省去这些没必要的重新计算。 我们需要一个可记忆的 selector 来替代这个 getVisibleTodos，只在 state.todos or state.visibilityFilter 变化时重新计算 todos，而在其它部分（非相关）变化时不做计算。 Reselect ...
Reselect 为什么可以优化 React 项目性能？
z_l_x_的博客
10-10 381
如果觉得不能满足你的性能追求，reselect 完全支持用户通过使用自定义的memoize与。详细的使用在官方文档中也有提到，不再展开。Reselect 为什么可以优化 React 项目性能？我想认真看完以上分析的各位应该都能回答一二。reselect 使用闭包保存上一次的参数lastArgs与结果lastResult，只有当依赖中的某个 Redux state 发生了变化，导致前后参数比对不一致了，才会触发 selector 的再次计算。
【redux】react-redux与reselector
richest_qi的博客
09-25 407
import {connect} from "react-redux"; function List(props){ return ( <ul> { props.list.map(item => <ListItem key={item.id} {...item}/>) } </ul> ) } const mapStateToProps
React状态管理（一）—— Redux
最新发布
huihui_999的博客
07-25 809
React状态管理（一）—— Redux
Taro+react开发（73):Taro.createSelectorQuery
歌谣的博客
09-21 527
Taro.nextTick(() => { // 使用 Taro.nextTick 模拟 setData 已结束，节点已完成渲染 Taro.createSelectorQuery() .in(isH5 ? this : this.$scope) .select(".dynamic-detail-content-text") .fields({ size: true }) .exec(res => {...
Reselect整合Redux
delete_you的博客
03-22 141
简单了解reselect库中的createSelector函数的使用方法，同时将其整合到redux进行更加方便的状态管理
react怎么使用redux
06-11
使用Redux的基本步骤如下： 1. 安装redux和react-redux库 ``` npm install redux react-redux ``` 2. 创建Redux的store ``` import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer); ``` 3. 定义Redux的reducer ``` const initialState = { // 初始状态 }; function rootReducer(state = initialState, action) { switch (action.type) { case 'SOME_ACTION': // 处理某个action return { ...state, someData: action.payload }; default: return state; } } ``` 4. 创建Redux的action ``` function someAction(payload) { return { type: 'SOME_ACTION', payload }; } ``` 5. 在React组件中使用Redux的state和action ``` import { connect } from 'react-redux'; function MyComponent(props) { return ( <div> <p>Some data: {props.someData}</p> <button onClick={() => props.someAction('new data')}> Update data </button> </div> ); } const mapStateToProps = state => ({ someData: state.someData, }); const mapDispatchToProps = { someAction, }; export default connect(mapStateToProps, mapDispatchToProps)(MyComponent); ``` 这是最基本的使用方法，更复杂的场景下可能需要使用redux-thunk等中间件来处理异步操作，或者使用reselect等库来优化性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值