react-redux学习笔记
使用action创建函数封装逻辑是react与redux配合的最佳实践：
- 当所有的逻辑都被转移到redux之后，react就可以只负责渲染界面并发起action创建函数了
ActionCreator要返回一个action对象，那么它是如何处理复杂的逻辑的呢？ —> 中间件
发起一个action创建函数，只需要将其返回结果传给dispatch()
为什么使用redux thunk?该中间件可以让action创建函数先不返回action对象，而是一个函数：
- 通过这个函数： 接收store的两个方法dispatch和getState作为参数，延迟dispatch或只在满足指定条件情况下dispatch
如何激活redux thunk中间件？在createStore中加入参数：applyMiddleware(thunk)
将redux手动连接到react组件，即不使用react-redux:
- 更新方法：store.subscribe(render)
- 为什么要使用react-redux?
- 手动的缺点：
- 1.无法直接给组件传递state和方法
- 2.任意的state变化都会导致整个组件树的重新渲染，没有性能优化
- react-redux优势：
- 不仅可以给组件树中的任一组件绑定state和方法，还进行了性能优化，避免了不必要的重新渲染
使用react-redux：
- 1.在所有组件的顶层使用Provider组件给整个程序提供store
- 原理：通过context将store专递给子组件
- store是一个包含三个函数的对象，三个函数分别是：subscribe，dispatch，getState
- Provider中重新定义了componentWillReceiveProps，检查每次渲染时代表store的prop和上一次是否一样，如果不一样则给出警告
- 2.使用connect()将state和action创建函数绑定到组件中，接收两个参数
- 第一个参数: 函数，参数为state，通过返回一个对象，将state或其某些属性合并到组件props的相应的属性中
- 第二个参数：对象或函数。分别有四种情况：
- 对象，是所有actionCreator的集合，将所有actionCreator传到组件的同名属性，并为每个actionCreator隐式绑定dispatch方法；
- 函数，参数为dispatch,返回的对象会被自动合并到组件的props中，但不会自动为actionCreator绑定dispatch方法，需手动绑定
- 函数，参数为dispatch,返回值使用redux的bindActionCreators()来减少样板代码:bindActionCreators(ActionCreators, dispatch)
- 为空，组件自己使用dispatch发起action
- 注：除了以上写法外，connect还有装饰器写法
- 3.并不是所有的组件都需要连接redux，理解容器组件和展示组件的差异性，connect相当于是对容器组件和展示组件的一个连接
源码分析：
- 顶层组件provider
javascript
class Provider extends Component {
···
getChildContext () {
store: this.props.store
}
render () {
return this.props.children
}
···
}
Provider.childContextTypes = {
store: PropType.object
}
“` - 底层组件如何使用Context
模块化应用：
- 状态树的设计原则
- 1.一个模块控制一个节点
- 2.避免数据冗余
- 3.树形结构扁平
- 单一数据源原则：对于嵌套过深的数据结构（状态树）问题，先定义多个reducer对数据进行
拆解访问／修改再通过combineReducers函数将零散的数据拼装回来的方法。