【无标题】

请添加图片描述
请添加图片描述
redux是一个专门用于状态管理的js库
作用:集中式管理react应用中多个组件共享的状态。

不同身份的用户有不同的使用方式(比如普通用户和管理员)
View要从多个来源获取数据
某个组件的状态,需要共享且需要在任何地方都可以拿到
一个组件需要改变全局状态
一个组件需要改变另一个组件的状态

Store 就是保存数据的地方
Redux 提供createStore这个函数,用来生成 Store。

当前时刻的 State,可以通过store.getState()拿到

store.dispatch()是 View 发出 Action 的唯一方法。

你在你的组件中要做什么,你要把你这个操作告诉action Creators
用于创建action,是一个动作对象,type 类型,data:干啥 —2
dispatch 分发action 这个动作对象,分发给store 类似一个调度者,不去做操作
store把当前的state和action给reducers
Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State的纯函数,返回给store
用于初始化状态、加工状态

组件使用getState获取最近的状态

action

异步action 是在redux里做异步操作,非在组件里面做异步操作
同步action : object 类型的一般对象
异步action:函数 :因为函数里面才能做异步任务,但是store只能接受一个对象,所有要使用一个中间件
redux-thunk中间件,改造store.dispatch,使得后者可以接受函数作为参数。
让store先调用一下这个函数在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.求和案例_react-redux基本使用

		(1).明确两个概念:
					1).UI组件:不能使用任何redux的api,只负责页面的呈现、交互等。
					2).容器组件:负责和redux通信,将结果交给UI组件。
		(2).如何创建一个容器组件————靠react-redux 的 connect函数
						connect(mapStateToProps,mapDispatchToProps)(UI组件)
							-mapStateToProps:映射状态,返回值是一个对象
							-mapDispatchToProps:映射操作状态的方法,返回值是一个对象
		(3).备注1:容器组件中的store是靠props传进去的,而不是在容器组件中直接引入
		(4).备注2:mapDispatchToProps,也可以是一个对象

5.求和案例_react-redux优化

		(1).容器组件和UI组件整合一个文件
		(2).无需自己给容器组件传递store,给<App/>包裹一个<Provider store={store}>即可。
		(3).使用了react-redux后也不用再自己检测redux中状态的改变了,容器组件可以自动完成这个工作。
		(4).mapDispatchToProps也可以简单的写成一个对象
		(5).一个组件要和redux“打交道”要经过哪几步?
						(1).定义好UI组件---不暴露
						(2).引入connect生成一个容器组件,并暴露,写法如下:
								connect(
									state => ({key:value}), //映射状态
									{key:xxxxxAction} //映射操作状态的方法
								)(UI组件)
						(4).在UI组件中通过this.props.xxxxxxx读取和操作状态

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值