一、UI组件 React-Redux将所有组件分成两大类：UI组件和容器组件。 UI组件有以下几个特征：

只负责UI的呈现，不带走任何业务逻辑。没有状态，即不使用（this.setate这个变量）所有数据都由（this.props）提供

不适用任何Redux的API

下面就是一个UI组件的例子 const Title = value =>

{value}

因为不含有状态，UI组件又称为 “纯组件” 二、容器的组件 容器组件的特征恰恰相反

负责管理数据和业务逻辑，不负责UI的呈现带有内部状态使用Redux的API

总之，记住一句话就可以了 UI组件负责UI的呈现，容器组件负责和管理数据逻辑。 你可能会问如果一个组件既有UI又有业务逻辑，怎么办？ 回答是，将他拆分成下面的结构：外面是一个容器组件，里面是一个UI组件，前者负责与外部通信，将数组传给后者，由后者渲染出视图。 React-Redux规定，所有的UI组件都由用户提供，容器组件则是由React-Redux生成，也就是说用户负责视觉层，状态管理则是全部交给它。

三、Connect() React-Redux提供connect方法，用于从UI组件生成容器组件，connect的意思是，就是把两种组件连接起来。

import { connect } from react-redux; const todoApp = connect(()=>{ return{ state } } )(Main)

上面代码中Main是UI组件， todoApp是由React-Redux通过connect方法自动生成的容器组件。 但是因为没有定义业务逻辑，上面这个容器组件毫无意义，只是UI组件的一个单纯包装层，为了定义义务逻辑，需要给出下面两方面的信息。 （1）输入逻辑：外部的数据（即state对象）如何转化为UI组件的参数。 （2）输出逻辑：用户发出的动作如何变为action对象，从UI组件传出去。 因此，connect的完整API如下：

import { connect } from "react-redux"; const todoApp = connect( mapStateToProps, mapDispatchToprops )(Main)

上面方法中connect接受两个参数， mapStateToProps和mapDispatchToProps。 它们定义了UI组件的业务逻辑，前者负责输入逻辑，即将state映射到 UI组件的参数 (props) ,后者用于输出逻辑，即将用户对UI组件的操作映射成Action。 四、mapStateToProps() mapStateToProps()是一个函数，它的作用就像它的名字一样，建立一个从（外部的）state 对象到（UI组件的）props对象的关系。 作为函数，mapStateToProps执行完之后返回一个对象，里面的每一个键值对就是一个映射，请看下面的例子

const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos,state.visibilityFilter) } }

上面的代码中，mapStateToProps是一个函数，它接受state作为参数， 返回一个对象，这个对象有todos属性，代表UI组件的同名参数，后面的 getVisibleTodos也是一个函数，可以从state算出todos的值。

五、< Provider >组件 connect方法生成容器组件之后，需要让容器组件拿到state对象，才能生成UI组件的参数。一种解决方法就是将state对象作为参数，传入到容器组件，这样做比较麻烦。尤其是容器组件可能是在很深的层级，一级一级state传下去就很麻烦。

React-Redux提供Provider组件，可以让容器组件拿到state

import { Provider } from "react-redux"; import { createStore } from "redux"; import todoApp from "./reducers"; import Main from "./componnets/Main"; const store = createStore(todoAPP); render( <Provider store={store}> <Main /> </Provider>, document.getElementById("root") )