react-redux的使用从action规划到reducer实现及完整案例

本文详细介绍了如何使用react-redux进行状态管理,从规划应用结构、功能定位,到编写action和reducer,再到构建操作界面,特别是如何使store中的数据与组件通信,最后展示了如何在页面中使用组件。文中通过一个用户管理功能的实例,清晰地展示了react-redux的工作流程。
摘要由CSDN通过智能技术生成

网络中介绍redux和react-redux的文章非常非常多我为什么要写这篇文章呢?因为他们都写得不好。好与不好的标准就是对于一个需要学习react redux的人能不能在读完文章后顺利理解和完成可运行案例。由于时间关系和演示项目对文件命名不是很合理,请谅解。
redux作为一个状态管理库其实是独立的。可以在angular,vue,react或者jQuery中使用。当然使用redux你需要遵循一定的规律或者标准,这会在项目和代码中体现。

规划结构

在本案例中我要做一个用户管理的功能,用redux来管理用户的数据。规划的结构如下:

{
	users:[
	 { name: 'xxx', gender: 'm' },
	 { name: 'yyy', gender: 'f' },
	],
	selectedUser: { name: '魏永强', gender: 'm' }
}

这一步非常重要,你需要先自己构思下你的应用的单一状态树。这个结构请大家记住了后边在构建action, reducer时你就会觉得非常清晰;

功能定位

  1. 我们需要可以添加用户 ADD_USER
  2. 我们需要在列表中点击查看用户详情 SELECT_USER</
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MarsWill

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值