使用Redux axios完成TodoList 列表的网络请求初始化、增加、删除功能

  1. git 源码 https://github.com/fanxiao168/React-todoList

  2. 效果图
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

先说下上图他们之间是怎么操作流通的:
1、当view需要发起行为时,需要在当前位置触发action,即store.dispatch(addNote())
2、当Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。而这种 State 的计算过程就叫做 Reducer。而Reducer方法是由store.dispatch方法触发来自动执行的。为此,Store 需要知道 Reducer 函数,做法就是在生成 Store 的时候,将 Reducer 传入createStore方法。
import { createStore } from ‘redux’; const store = createStore(reducer);
Reducer 是一个函数,且为纯函数,它接受 Action 和当前 State 作为参数,Reducer 函数里面不能改变 State,必须返回一个全新的state对象。
3、state更新,触发view发生改变,而在此之前必须把数据store和操作事件action绑定到需要使用的组件上,就需要用到connect函数(connect方法可参考这篇文章:https://yq.aliyun.com/articles/59428):
意思是先接受两个参数(数据绑定mapStateToProps和事件绑定mapDispatchToProps),再接受一个参数(将要绑定的组件本身):
export default connect(mapStateToProps,mapDispatchToProps)(App)
其中:
mapStateToProps 就是将state作为props绑定到组件上
mapDispatchToProps是可选的,将 action 作为 props 绑定到组件上,如果不传这个参数redux会把di

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值