React 只是 DOM 的一个抽象层(ui)，并不是 Web 应用的完整解决方案。有两个方面，它没涉及。
* 代码结构
* 组件之间的通信
为了解决这个问题，2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015年，Redux 出现，将 Flux 与函数式编程结合一起，很短时间内就成为了最热门的前端架构
简单说，如果你的UI层非常简单，没有很多互动，Redux 就是不必要的，用了反而增加复杂性。
* 用户的使用方式非常简单
* 用户之间没有协作
* 不需要与服务器大量交互，也没有使用 WebSocket
* 视图层（View）只从单一来源获取数据
下面情况才是 Redux 的适用场景：多交互、多数据源。
* 用户的使用方式复杂
* 不同身份的用户有不同的使用方式（比如普通用户和管理员）
* 多个用户之间可以协作
* 与服务器大量交互，或者使用了WebSocket
* View要从多个来源获取数据
从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。
* 某个组件的状态，需要共享
* 某个状态需要在任何地方都可以拿到
* 一个组件需要改变全局状态
* 一个组件需要改变另一个组件的状态
Redux 的设计思想很简单，就两句话。
1. Web 应用是一个状态机，视图与状态是一一对应的。
2. 所有的状态，保存在一个对象里面(唯一数据源)
redux的小案例：理解这个案例就感觉明白了好多；
cnpm i redux -S
```
import {createStore} from 'redux'
import reducer from './reducer'
const Store = createStore(reducer);
export default Store
```
reduers:是一个纯函数Reducer; 函数负责生成 State。由于整个应用只有一个 State 对象，包含所有数据，
import {ADD_NUMBER, REDUCE_NUMBER} from './TYPES'
//创建初始状态
let _state = {
num:1
}
const reducer = (state = _state,action)=>{
if(action.type == '@@redux/INIT'){
console.log('1. Store通过reducer创建了初始状态')
}
let _state = Object.assign({},state)
// alert(action.type)//默认执行的，redux自有的
//必须有返回值
switch(action.type){
case ADD_NUMBER:
console.log('6.reducer接收到action并根据信息判断知乎返回新的state')
_state.num ++;
return _state;break;
case REDUCE_NUMBER:
_state.num --;
return _state;break;
default:
return state;break;
}
return state
}
export default reducer
cnpm i redux -S counter：计数器 ``` import React from 'react'; import PropTypes from 'prop-types'; import Store from '../redux/store' import Button from './Button' //调用actions中的方法 import actions from '../redux/actions' class Counter extends React.Component{ constructor(props){ super(props) this.state = { num:Store.getState().num } console.log('2.view通过Store.getState()获取到了store挂在在自己的状态') this.handleAddNumber = this.handleAddNumber.bind(this) // this.handleReduceNumber = this.handleReduceNumber.bind(this) } handleAddNumber(){ console.log('3.用户产生了操作调用了action方法') actions.addNumber() } // handleReduceNumber(){ // actions.reduceNumber() // } componentWillMount(){ Store.subscribe(function(){ console.log('7.store的reducer更改为新的state的时候，store.subscribe方法里的回调函数会执行，此时就可以通知view去重新获取state') this.setState({num:Store.getState().num}) }.bind(this)) } render(){ let {num} = this.state return( <div> <Button handler = {actions.reduceNumber}>-</Button> {num} <Button handler = {this.handleAddNumber}>+</Button> </div> ) } } Counter.defaultProps = { } Counter.propTypes = { } export default Counter
action:是一个穿对象，包含一些方法；
```
import {ADD_NUMBER,REDUCE_NUMBER} from './TYPES'
//需要调用store的方法
import Store from './store'
//纯对象，包含一些方法
const actions = {
addNumber(){
console.log('4.actions的方法被调用，创建了带有标示信息的action')
let action = {
type:ADD_NUMBER
}
console.log('5.actions同故调用actions.dispatch方法传递给reducer')
Store.dispatch(action)
},
reduceNumber(){
let action = {
type:REDUCE_NUMBER
}
Store.dispatch(action)
}
//发送给store
}
export default actions
TYPES:
```
const ADD_NUMBER = 'ADD_NUMBER'
const REDUCE_NUMBER = 'REDUCE_NUMBER'
export {ADD_NUMBER,REDUCE_NUMBER}
```
注意：flux,redux都不是必须和react搭配使用的，因为flux和redux使完整的架构，在学习react的时候，只是将
Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。
纯函数是函数式编程的概念，必须遵守以下一些约束。
* 不得改写参数
* 不能调用系统 I/O 的API
* 不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果；可以放在action里进行操作
划分reducer
因为一个应用中只能有一个大的state，这样的话reducer中的代码将会特别特别的多，那么可以使用combineReducers方法将已经分开的renducer合并到一起
```
// State 是一个数组
function reducer(state, action) {
return [...state, newItem];
}
```
最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。
注意：
1. 分离reducer的时候，每一个reducer维护的状态都应该不同
2. 通过store.getState获取到的数据也是会安装reducers去划分的
无状态组件里含有react