redux的理解和使用

redux的使用

使用redux的目的

1. 在一个复杂的项目之中,通过props在组件之中传值让我们很头痛
2. 使用发布订阅的方式又难以去管理
3. redux提供了方案实现组件间的数据共享,让我们不用操心组件间传值的问题,直接去使用共享的数据去解决业务问题

使用redux的原则

• 简单的业务场景没必要去使用redux
• 跨组件获取状态很困难再去使用

redux的简易原理

1. 组件派发一个action(type:’’,data)
2. store接收action,并将数据之前的状态丢给reducer
3. reducer针对于相应的type类型进行业务逻辑处理,并返回一个新的值
4. 需要该数据的组件,从store去拿到对应的值,然后去处理业务

redux几个插件的关系

• redux 就是一个状态管理工具
• redux-thunk 让redux能够实现异步处理数据
• react-redux 让redux在react的使用中有一个更好体验和开发模式,方便程序员开发

需要实现的一个基本业务场景

1. 消息列表可以新增消息
2. 在另一个组件中需要显示消息的数量提示用户,并且用户可以回复消息
3. 用户回复消息,可以将消息显示在列表页
4. 类似于聊天时候的消息提示

实现结果

• 初始化页面

  • 分为两个组件,一个是消息条数组件,一个是列表页组件

• 点击新增按钮

  • 消息条数组件可以拿到消息列表的数据,并展示出来

• 点击回复

  • 可以把数据传到消息列表中

dome地址: https://github.com/David-XIa001/react-redux-dome.git