为什么要使用Redux？
要理解为什么要在React应用中使用Redux，就要先理解React App中是如何管理状态的。
React state vs. props
React的组件是通过对状态的更改来实现页面UI的变化的。状态可以自行定义，它可以是任何会导致页面UI发生变化的属性，例如数据，一个组件的开关等等。React的状态分两种，一种是state，另一种是props。State可以理解为在单个组件内定义并且使用的状态，而props是从父组件中传入的。State与props最大的不同在于，state是可以改变的，而props不能更改（其实也很好理解，props是从父组件中传入的，因此可以当作是归属于父组件的，所以当然不能在子组件中更改）。
React数据流的局限
React中，父组件的state可以作为一个参数被传入子组件，在组件中通过props去获取。这种逐级传递的方式，使得数据的传递十分容易追踪，但同时也存在一些问题：首先，如果组件有多层嵌套的情况，那么中间组件可能需要传递一些自己本身不需要使用的数据；其次，相对于父传子，子传父或者兄弟组件之间的数据传递就没有那么的直观和容易理解。
正如图一所示，React的数据流最大的问题是不能越级传递，而Redux应运而生来解决这个问题。
Redux的核心概念
Redux是现在最流行的前端开发库之一，它能够在前端应用中搭建一个简单易读的数据流结构。Redux主要用于应用程序的状态管理。简单来说，Redux通过在应用中创建一个不可变的状态树来管理整个应用的状态，这个状态树无法被直接更改。而当状态需要更改的时候，一个新对象会被创建，我们将会在下文详细介绍其核心概念。
可以说，Redux的起点是store，整个应用的state被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个store中。UI界面，也就是图二中的View会根据state的不同，渲染出不同的效果。例如，在一个todolist里面，我们可以通过切换visibilityFilter去过滤出不同状态的todos。
console.log(store.getState())
/* 输出
{
visibilityFilter: 'SHOW_ALL',
todos: [
{
text: 'Consider using Redux',
completed: true,
},
{
text: 'Keep all state in a single tree',
completed: false
}
]
}
*／
那么，我们在View中如果想去改变visibilityFilter，我们应该怎么办呢？我们应该向store发送一个action。唯一改变 state 的方法就是触发action，action 是一个用于描述已发生事件的普通对象。例如，我们可以发送一个叫做'SET_VISIBILITY_FILTER'的action，并且给这个action传递一个参数filter。
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
})
当action被store接收到之后，store怎么知道要对state做出什么更改呢？这时，我们就应该去编写reducers。Reducer 只是一些纯函数，它接收先前的 state 和 action，并返回新的 state。Reducer通过查找接收的action的type对应的case，创建新的state。
function visibilityFilter(state = 'SHOW_ALL', action) {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter
default:
return state
}
}
至此，旧的state已经被新的替换，相应的，View也会作出变动，todolist会只展示已完成的todos。这就是一次完整的redux单向数据流，相信你已经大概了解了store、action和reducer，以及它们在redux中起到的作用。
