Redux 简介
是 JavaScript 状态容器，提供可预测化的状态管理
reac 设计思想
-> web 应用是一个状态机，视图与状态是一一对应的。
-> 所有状态，保存在一个对象里面
Redux 工作流程
-> 用户通过store.dispatch()方法发送action，告诉store，state 要发生变化
eg: store.dispatch(action);
-> store 自动调用reducer,并传入两个参数，当前state和接受的action，reducer会返回新的state
eg: let nextState = todoApp(previousState, action);
-> state 变化。store就会调用监听函数
eg: store.subscribe(listener);
-> listener可以通过store.getState()得到当前状态，如果使用的是react，这是可以触发重新渲染view
eg: function listerner() {
let newState = store.getState();
component.setState(newState);
}
Redux 概念
-> Action
-> Reducer
-> Store
Redux API
-> store
保存数据的地方，相当于一个容器。整个应用只有一个Store
createStore 函数 生成Store
eg: let store = createStore(fn)
-> state
store对象包含所有数据，如果想得到某个时点的数据，就要对store生成快照。这种时点的数据集合叫state,通过store.getState()拿到，一个state对应一个view，只要state相同，view就相同,State 的变化，会导致 View 的变化
-> Action
action是view发出通知，代表state应该要发生变化的中间介质
action是一个对象。其中type是必须属性，代表action的名字，其他属性自由设置
-> store.dispatch() 是view发出action的唯一方法
-> Reducer
store收到action后，必须给出新的state，这样view才会发生变化，这种state的计算过程就叫reducer
-> store.subscribe()
监听函数，state发生变化 ，就会自动执行这个函数
Redux异步
-> 中间件
applyMiddlewares() 它是redux的原生方法，作用是奖所有中间件组成一个数组，依次执行
-> 异步
同步才做只要发出一种action即可，异步操作的差别是它发出三种action
state也进行了改造
三种action 有两种不同写法
1、名称相同，参数不同
2、名称不同
eg: let state = {
// ...
isFetching: true, 是否抓取数据
didInvalidate: true, 数据是否过时
lastUpdated: 'xxxxxxx' 上一次更新时间
}
-> 异步操作思路
操作开始时，发送一个action，触发state更新为 "正在操作" 状态，view重新渲染
操作结束后，再发出一个action。触发state更显为 "操作结束" 状态，view再一次重新渲染
React-Redux
-> UI组件
UI 特性
1、只负责UI的呈现，不带有任何业务逻辑
2、没有状态(即不适用this.state这个状态)
3、所有数据都由参数(this.props)提供
4、不适用任何redux的API
5、纯组件，纯粹由参数决定它的值
-> 容器组件
特征
1、负责管理数据和业务逻辑，不负责ui的呈现
2、带有内部状态
3、使用redux的API
react-redux规定，所有的UI组件都由用户提供，容器组件由react-redux自动生成，也就是说，用户负责视觉层，状态管理则是全部交给它。
-> connect方法
将两个组件连起来
eg: import { connect } from 'react-redux'
const VisibleTodoList = connect( mapStateToProps,mapDispatchToProps)(TodoList);
TodoList 是UI组件，VisibleTodoList是由react-redux通过connect方法自动生成的容器组件
-> mapStateToProps ：输入逻辑，既state映射到UI组件的参数（props）
-> mapDispatchToProps : 输出逻辑，即用户对UI组件操作映射成action
view(React) = 家具的摆放在视觉的效果上store(state) = 每个家具在空间内的坐标(如：电视的位置是x:10, y: 400)action = 小明分配任务(谁应该干什么)reducer = 具体任务都干些什么(把电视搬到沙发正对面然后靠墙的地方)所以这个过程应该是这样的：view ---> action ---> reducer ---> store(state) ---> view
网友评论