版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
flux
flux是一种架构思想，是用来解决软件结构问题的，它有多种实现
flux基本概念
flux将应用程序分成4个部分
- View：视图层
- Action：视图发布的消息（比如鼠标点击）
- Dispatcher（派发器）：用来接收Actions，执行回调函数
- Store（数据层）：用来存放应用的状态数据，一旦发生改变就提醒视图要更新页面
flux最大特点-数据是单向流动的
- 用户访问View
- View发出用户的Action
- Dispatcher收到Action后要求Store进行相应的更新
- Store更新之后发出一个change事件
- View收到change事件后更新页面
flux架构优势
flux架构是单向数据流动，在传统MVC、MVVM架构设计模式下有个致命的缺点，就是当项目越来越大、逻辑越来越复杂的时候，数据流动显得很混乱，维护成本太大。
flux就是为了解决这种混乱的数据流动，它致力于解决数据的单向传输的架构设计模式。
flux的简单实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.bootcss.com/redux/4.0.1/redux.min.js"></script>
<title>Document</title>
</head>
<body>
<div>
<p>
clicked: <span id="value">0</span> times
<button id="increment">+</button>
<button id="decrement">-</button>
</p>
</div>
<script>
// redux要求创建一个reducer是一个纯函数，接受两个参数
function counter (state = 0, action) {
switch(action.type) {
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
default:
return state
}
}
// 创建一个redux的store，用它来持有app的state
// store的API极其简单只有3个分别是subscribe、dispatch、getState
// 创建store
let store = Redux.createStore(counter)
let valueEl = document.getElementById('value')
let increment = document.getElementById('increment')
let decrement = document.getElementById('decrement')
// 渲染
function render () {
valueEl.innerHTML = store.getState().toString()
}
increment.onclick = function () {
store.dispatch({
type: 'INCREMENT'
})
}
decrement.onclick = function () {
store.dispatch({
type: 'DECREMENT'
})
}
// 订阅store变化，然后执行render函数重新渲染页面
store.subscribe(render)
render()
</script>
</body>
</html>- Store作为flux架构的核心部分，它包含一个核心的东西reducer，reducer是一个纯函数，它接受2个参数，第一个是state，第二个是action，reducer函数必须返回完整的state，每次收到视图的dispatch派发出来的action就会执行reducer
- 通过redux提供的createStore(reducer)方法可以创建store供全局使用
- reducer的形式：(state,action) => state
- action的形式：() => dispatch({type: 'DAXIE'})