Redux 学习笔记（一）

reducer

三个作用：

1. 接受 actions
2. 保存初始 state
3. 处理 actions ， 并更新state

containers

Redux makes the difference between containers, which are connected to the state, and components, which are dumb and stateless

作用：

1. 连接 state 和 componetns 组件
2. dispatch action

react-redux 中的 connect

作用：提供两个关键模块：(通常在 container 中使用)

1. Provider

   作用：Provider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，它的工作很简单，就是接受Redux的store作为props，并将其声明为context的属性之一，子组件可以在声明了contextTypes之后可以方便的通过this.context.store访问到store。不过我们的组件通常不需要这么做，将store放在context里，是为了给下面的connect用的。

2. connect

   作用： 这个模块是算是真正意义上连接了Redux和React，正好它的名字也叫connect。

   先考虑Redux是怎么运作的：首先store中维护了一个state，我们dispatch一个action，接下来reducer根据这个action更新state。

   映射到我们的React应用中，store中维护的state就是我们的app state，一个React组件作为View层，做两件事：render和响应用户操作。于是connect就是将store中的必要数据作为props传递给React组件来render，并包装action creator用于在响应用户操作时dispatch一个action。

3. React组件如何响应store的变化？

   我们把connect返回的函数叫做Connector，它返回的是内部的一个叫Connect的组件，它在包装原有组件的基础上，还在内部监听了Redux的store的变化，为了让被它包装的组件可以响应store的变化:

4. 为什么connect选择性的merge一些props，而不是直接将整个state传入？

   通常，我们connect的是某个Container组件，它并不承载所有App state，然而我们的handler是响应所有state变化的，于是我们需要优化的是：当storeState变化的时候，仅在我们真正依赖那部分state变化时，才重新render相应的React组件，那么什么是我们真正依赖的部分？就是通过mapStateToProps和mapDispatchToProps得到的。

5. pure优化的是什么？

   在shouldComponentUpdate中做检查，如果只有在组件自身的props改变，或者mapStateToProps的结果改变，或者是mapDispatchToProps的结果改变时shouldComponentUpdate才会返回true，检查的方式是进行进行shallowEqual的比较。

6. 使用ES7 decorator功能来配合React ES6的写法：

    @connect(
        state => ({
        user: state.user,
        resource: state.resource
      }),
      dispatch => ({
        ...bindActionCreators({
          loadResource: ResourceActions.load
        }, dispatch)
      })
    )
    export default class Main extends Component {

    }