在Compose中像使用redux一样轻松管理全局状态

最新推荐文章于 2024-08-20 14:34:38 发布
最新推荐文章于 2024-08-20 14:34:38 发布
阅读量849 收藏 20
点赞数 32
分类专栏： ComposeHooks 文章标签： react.js android jetpack composeui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011133887/article/details/137237562
版权

写在前面

本文中提及的use开头的函数，都出自与我的 ComposeHooks 项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关系复杂的状态管理，专心于业务与UI组件。

这是系列文章的第五篇，前文：

也许只有 useContext 、useReducer 是不够的

书接上回，上次的文章发布后有小伙伴在评论区留言，谈到了关于在组件之间保存状态的问题，我也给予了回答，那就是使用 useContext 进行进一步的状态提升。

但是在之前版本的ComposeHooks 并没有很方便的方式让我们将 useContext 与 useReducer 配合起来，只使用这二者在暴露多个状态时非常麻烦。

现在全新版本的 redux-react 风格的 hook来啦，它就是 useSelector、useDispatch，现在你可以轻松的构建全局状态，并通过这两个钩子轻松的跨组件获取状态与dispatch函数。它是基于 useContext 的进一步封装，现在你可以不需要再自己去配置 useContext 来管理状态暴露了！

如何使用

关于 reducer 的概念，请先查阅 在Compose中方便的使用MVI思想？试试useReducer！，一些概念我们就不再赘述了，这里依旧使用我最喜欢的 Todos 作为案例 （在Compose中使用状态提升？我提升个P…Provider）。

暴露全局状态

首先我们在根组件使用 ReduxProvider 组件暴露全局状态存储。

data class Todo(val name: String, val id:
最低0.47元/天 解锁文章
详解Jetpack Compose中的状态管理与使用
金戈鐡馬
05-20 1652
引用一段官方描述，如下由于 Compose 是声明式工具集，因此更新它的唯一方法是通过新参数调用同一可组合项。这些参数是界面状态的表现形式。每当状态更新时，都会发生重组。因此，TextField 不会像在基于 XML 的命令式视图中那样自动更新。可组合项必须明确获知新状态，才能相应地进行更新。
在Compose中轻松使用异步dispatch管理全局状态
Junerver的博客
04-03 759
本文中提及的use开头的函数，都出自与我的项目，它提供了一系列 React Hooks 风格的状态封装函数，可以帮你更好的使用 Compose，无需关系复杂的状态管理，专心于业务与UI组件。在Compose中使用useRequest轻松管理网络请求在Compose中使用状态提升？我提升个P…Provider在Compose中父组件如何调用子组件的函数？在Compose中方便的使用MVI思想？试试useReducer！在Compose中像使用redux一样轻松管理全局状态more。
Android全新UI框架之Compose状态管理与重组
qq_36828822的博客
02-24 2166
Compose采取了声明式UI的开发范式。在这种范式中，UI的职责仅作为数据状态的反应。如果数据状态没有变化，则UI永远不会自行改变。如果把Composable的执行看作是一个函数运算，那么状态就是函数的参数，生成的布局就是函数的输出。
redux之compose
weixin_34292959的博客
07-28 225
redux 是状态管理库，与其他框架如 react 是没有直接关系，所以 redux 可以脱离 react 在别的环境下使用。由于没有和react 相关逻辑耦合，所以 redux 的源码很纯粹，目的就是把如何数据管理好。而真正在 react 项目中使用 redux 时，是需要有一个 react-redux 当作连接器，去连接 react ...
Compose 状态管理
xiangxiongfly
05-07 675
使用 MutableState remember StatelessComposable & StatefulComposable 状态提升 rememberSaveable 支持parceable 不支持parceable 使用ViewModel ViewModelProvider.Factory 使用Flow
Redux之compose
weixin_34244102的博客
05-25 1012
前言 在前面的基础篇中我们讲解了createStore,bindActionCrearoes,combineReducers,在高级篇讲解了applyMiddleware,致此redux相关的5个API就剩下一个compose，之所以把compose单独写一篇文章的原因是因为是compose五个API里唯一一个能单独拿出来用的函数，就是函数式编程里常用的组合函数，和 redux 本身没有什么多...
Redux：JS预测全局状态管理库详解
8. **Connect（连接）**：在React中使用Redux时，connect是一个函数，用来连接React组件和Redux的store。通过connect函数，组件可以读取store中的状态并监听状态的变化，同时可以分发动作以更新状态。 Redux 的使用...
redux中文文档
05-06
Redux 是一种流行的 JavaScript 状态管理库，主要用于管理应用程序中的全局状态。它的设计思想受到 Flux 架构的启发，但借鉴了 Elm 架构的某些思想，从而减少了 Flux 中的一些复杂性。Redux 最初是为 React 框架设计...
Redux 5.0.0-alpha.4：增强React全局状态管理
Redux是一个在JavaScript应用程序中实现全局状态管理的库。它由Dan Abramov和Andrew Clark共同开发，最初是作为React应用程序的状态容器设计的。Redux提供了一种可预测的方式来管理应用状态，使得应用的数据流变得...
redux v3.7.2源码详细解读与学习之compose
weixin_34212189的博客
12-19 198
redux是什么、有什么作用，解决什么问题，如果你还不知道，请先去这里： redux中文文档下面的文章适合对redux有一定理解和使用经验的人项目github地址：github.com/wangweiange…如果你觉得对你有帮助的话记得给我一个star 呢说明：代码使用parcel自动化编译，项目零配置，很方便简单的搭建工程，如果你不了解parcel是什么 你可以：看看parcel是什么对red...
Redux源码浅析系列(三)：`compose `
胖猫的博客
02-10 436
compose实际上是一个函数式编程中的写法，表示从右向左组合多个函数。为了方便，被放到了redux里面来。 当我们需要将多个storeEnhancers依次执行的时候，就需要用到它。 下面，我们来看一下它的用法： compose(...funcs) funcs 表示 需要合成的多个函数。预计每个函数都接收一个参数。它的返回值将作为一个参数提供给它左边的函数，以此类推。最右边的参数可以接受...
redux之compose的理解
热门推荐
astonishqft的博客
09-20 1万+
redux之compose的理解redux之compose的理解应用reduce方法compose函数 redux之compose的理解 应用 最近给自己的react项目添加redux的时候，用到了redux中的compose函数，使用compose来增强store，下面是我在项目中的一个应用: import {createStore,applyMiddleware,compose} from '...
Android Jetpack Compose学习笔记（二）Compose的状态和生命周期
bugyinyin的博客
07-04 2654
之前我们介绍了Compose编程思想，今天我们来看看Compose的状态和生命周期，先来看看Compose的状态。上接：Android Jetpack Compose学习笔记（一）Compose编程思想先讲一个概念————组合，之前说过可组合函数，而组合用于描述界面，通过运行可组合项来生成，也是树的结构。简单说下Compose的工作流程：在初始组合期间，Compose跟踪为描述界面而调用的可组合项；当应用程序的状态发生变化时，Compose会安排重组；重组过程中会运行可能已更改的可组合项以响应状态变化，然后
第48节—— redux 中的 compose——了解
weixin_57017198的博客
10-07 473
在上面的例子中，我们使用 compose 函数将 withUser, withRouter, withStyle 这三个高阶组件组合成了一个新的 HOC enhance，使用 enhance 函数后，MyComponent 组件就具备了 HOC withUser, withRouter, withStyle 的所有特性。以下是伪代码 理解其意思即可。compose 是 Redux 提供的一个辅助函数，它的作用是将多个函数组合成一个新的函数，使这些函数能够按照从右到左的顺序依次执行。
redux-组合函数(compose)理解
hahehei123456的博客
08-16 774
redux-组合函数(compose)理解详解 redux 提供了 applyMiddleware 这个 api 来加载 middleware，两者联系如下： 组合的中中间件函数如下：function thunk({ dispatch, getState }) { return next => action => typeof action === 'function' ?
Redux 源码解读之 compose
杏子
11-22 280
compose 的核心功能是将高阶参数作为参数调用参数数组从右到左的第一个参数函数，然后将结果作为参数调用第二个参数函数，以此类推，直到返回最后一个参数函数执行结果（也就是从左到右的第一个参数函数执行结果）。
Redux源码分析--compose
wangyuegyq的博客
03-13 310
compose作用：将多个函数组合成一个函数，比如compose(f,g,h)，组合成一个f(g(h(...args))) compose传入的函数参数，只有最右边的函数，可以传入多个参数 compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1...
android compose 实现全局网络加载提示
最新发布
仓库管理系统解决方案
08-20 344
android compose 实现全局网络加载提示
Redux源码解读--（4）compose 和 applyMiddleware
Run_youngman的博客
01-17 911
这两个代码比较少，但是都是精华，放在一起讲。 先说compose文件。 export default function compose(...funcs) { if (funcs.length === 0) { return arg => arg } if (funcs.length === 1) { return funcs[0] } return f
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值