react-redux的基本用法

redux仅仅是一个状态管理的库，不能直接用于react，react-redux是redux作者封装的用于连接redux和react的库。

react-redux基本概念

1. UI组件

1. 只负责UI显示的组件，不包含业务逻辑
2. 没有状态
3. 所有数据都由(props)提供
4. 不使用任何Redux的API

2. 容器组件

1. 只负责管理数据和业务逻辑，不负责UI呈现
2. 有自己的状态
3. 使用Redux的API

3. 生成容器组件

react-redux提供了一些方法，来从UI组件生成容器组件，完整结构如下：

const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoList)

其中的

connect 是连接组件
mapStateToProps 是将状态映射为UI组件的props
mapDispatchToProps 是将dispatch(action)映射为一个具名方法，传入props，供UI组件调用

4. 容器组件如何接收全局的State

react-redux提供了<Provider>组件来解决任意层级的容器组件接收State的问题。<Provider>的本质
是使用了React的context属性，来将全局的State传递到任意层级的子组件。<Provider>的具体用法如下：

render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)    

<Provider>配合React-Router的用法

const Root = ({ store }) => (
    <Provider store={store}>
        <Router>
            <Route path="/" component={App} />
        </Router>
    </Provider>
)