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

网络中介绍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. 我们需要双击列表中数据删除该用户 DELETE_USER

用代码描述功能[action编写]

redux官网对action的描述是:把数据从应用传入store的有效载荷。
其实这个解释很难理解,我觉得在我们开发的视角应该觉得action是对功能的描述。

action.js文件

你可能感兴趣的:(前端)