redux

一、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"))