redux个人详解

Redux的流程,React中的props和state的用法(使用通过reducer创建出来的Store发起一个Action,reducer会执行相应的更新state的方法,每当state更新之后,
view会根据state做出相应的变化!)
redux的流程:
1.store通过reducer创建了初始状态
2.view通过store.getState()获取到了store中保存的state挂载在了自己的状态上
3.用户产生了操作,调用了actions 的方法
4.actions的方法被调用,创建了带有标示性信息的action
5.actions将action通过调用store.dispatch方法发送到了reducer中
6.reducer接收到action并根据标识信息判断之后返回了新的state
7.store的state被reducer更改为新state的时候,store.subscribe方法里的回调函数会执行,此时就可以通知view去重新获取state

注意:flux、redux都不是必须和react搭配使用的,因为flux和redux是完整的架构,在学习react的时候,只是将react的组件作为redux中的视图层去使用了

Store 就是保存数据的地方,你可以把它看成一个容器。整个应用只能有一个 Store。
Redux 提供createStore这个函数,用来生成 Store。

Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。
当前时刻的 State,可以通过store.getState()拿到
store.subscribe()
Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数
stroe的实现提供了三个方法
store.getState()
store.dispatch()
store.subscribe()
Action
State 的变化,会导致 View 的变化。但是,用户接触不到 State,只能接触到 View。所以,State 的变化必须是 View 导致的。Action 就是 View 发出的通知,
表示 State 应该要发生变化了。

Action Creator
View 要发送多少种消息,就会有多少种 Action。如果都手写,会很麻烦。可以定义一个函数来生成 Action,这个函数就叫 Action Creator

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

Reducer
Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

纯函数
Reducer 函数最重要的特征是,它是一个纯函数,也就是说,只要是同样的输入,必定得到同样的输出。
纯函数是函数式编程的概念,必须遵守以下一些约束

关于映射
react-redux提供provider组件,可以让容器组件拿到state 就是在根组件中把根包起来 在state={state}进行传输

react-redux还提供了一个connect方法,用于UI组件生成的容器
     
mapDispatchToProps是connect函数的第二个参数,用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说,它定义了哪些用户的操作应该当作 Action,
传给 Store

mapStateToProps是一个函数。它的作用就是像它的名字那样,建立一个从(外部的)state对象到(UI 组件的)props对象的映射关系

中间件
redux-logger中间件是生成一个日志
redux-logger提供一个生成器createLogger,可以生成日志中间件logger。然后,将它放在applyMiddleware方法之中,传入createStore方法,
就完成了store.dispatch()的功能增强

redux-promise
actionCreator可以返回函数,当然也可以返回其他值,让actionCreator返回一个promise对象
用dispatch方法可以接受promis对象作为参数

中间件(thunks:处理异步操作 saga:saga相当于在redux原有的数据流中多了一层监控,捕获监听到的action,进行处理后,
put一个新的action给相应的reducer去处理。 logger:提供日志输出 devtools:它可以让你实时的监控Redux的状态树的Store)

react-redux将所有组件分成两大类:UI组件和容器组件
UI组件有以下几个特征:
(1)只负责UI呈现,带任何业务逻辑
(2)没有状态(即不适用this.state这个变量)
(3)搜有数据都由参数(this.props)提供
(4)不适用任何redux的API
容器组件与UI组件相反

你可能会问,如果一个组件既有 UI 又有业务逻辑,那怎么办?回答是,将它拆分成下面的结构:外面是一个容器组件,
里面包了一个UI 组件。前者负责与外部的通信,将数据传给后者,由后者渲染出视图。

React-Redux 规定,所有的 UI 组件都由用户提供,容器组件则是由 React-Redux 自动生成。也就是说,用户负责视觉层,状态管理则是全部交给它。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值