Flux
Flux的单向数据流
单向数据流框架的始祖
- Dispatcher: 处理动作分发,维持Strore之间的依赖关系
- Store: 负责存储数据和处理数据的相关逻辑
- Action: 驱动Dispatcher的JS对象
- View: 视图部分,负责显示用户界面
Redux
image
Flux的基本原则是"单向数据流",Redux在此基础上强调三个基本原则:
- 唯一数据源
Redux只有一个Store,其状态结构的设计是Redux的核心问题(Redux对Store进行了封装)
- 保持状态只读
状态只读,修改Store状态通过派发action对象完成和flux相同. 改变状态不是直接修改状态上的值,而是创建一个新的状态对象返回给Redux,由Redux完成新的状态组装(此时,Reducer登场)
- 数据改变只能通过纯函数完成
纯函数Reducer;
在Redux中每个函数签名如下reducer(state,action);state:当前状态,action:接受到的action对象
Reducer只负责计算状态,却不负责存储状态
React-Redux
- connect: 连接Store (主要做两件事)
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
- 获取Store上的状态转化为组件的prop
- 将组件中用户动作dispatch给Store
-
Provider: 提供包含store的context
image
- 在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
- 接收Redux的store作为props，通过context对象传递给子孙组件上的connect
redux-actions插件
createAction 简化action
import * as ActionTypes from './ActionTypes'
import { createAction } from 'redux-actions'
// import { DECREMENT } from './ActionTypes'
// export const increment = (counterCaption) => {
// return {
// type: ActionTypes.INCREMENT,
// counterCaption
// }
// }
// export const decrement = (counterCaption)=>{
// return{
// type:ActionTypes.DECREMENT,
// counterCaption
// }
// }
export const increment = createAction(ActionTypes.INCREMENT)
export const decrement = createAction(ActionTypes.DECREMENT)
handleActions 简化Reducer
import * as ActionTypes from './ActionTypes'
import { handleActions } from 'redux-actions'
/* eslint-disable */
// export default (state, action) => {
// const {counterCaption} = action
// switch (action.type) {
// case ActionTypes.INCREMENT:
// return {...state, [counterCaption]: state[counterCaption] + 1}
// case ActionTypes.DECREMENT:
// return {...state, [counterCaption]: state[counterCaption] - 1}
// default:
// return state
// }
// }
export default handleActions({
[ActionTypes.DECREMENT] (state, action) {
return {...state, [action.payload]: state[action.payload] - 1}
},
[ActionTypes.INCREMENT] (state, action) {
return {...state, [action.payload]: state[action.payload] + 1}
}
}, null)
网友评论