redux学习

redux精简版

    - 去除Count组件自身的状态
    - src下建立
          -  redux
             -  store.js
             -  count_reducer.js
    - store.js
      - 引入redux中的createStore函数，创建一个store
      - createStore调用时要传入一个为其服务的reducer
      - 将store对象暴露出去
    - count-reducer.js
      - reducer本质是 一个函数，接收preState，action，返回加工后的状态
      - reducer 两个作用 初始化状态，加工状态
      - reducer被第一次调用时，是store自动触发的，传递的preState是undefined
    - 可以在index.js中检测store中状态的改变，一旦发生变化则重新渲染

redux求和案例完整版

    + 新增文件
      + count_action.js专门用于创建action对象
      + constant。js放置容易写错的type值

同步action和异步的action

  - + 明确延迟的动作不想交给组件自身，想交给action，相对状态进行操作，但是具体的数据靠异步任务返回
    + 同步action，指action的值为Object类型的一般对象
    + 异步action，指action的值为函数，异步action一般都会调用同步action
    + 异步的action不是必须要用的
    +  (3).具体编码：
	 			1).yarn add redux-thunk，并配置在store中
	 			2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
	 			3).异步任务有结果后，分发一个同步的action去真正操作数据。

react-redux的基本使用

    + 明确两个基本概念
      + ui组件，不能使用用redux的api，只负责页面的呈现和交互
      + 容器组件，负责和redux通信，将结果返回给UI组件
    + 如何创建一个融器组件-- 靠react-redux的connect函数
      + connect (maoStateToProps,mapDispatchToProps )(UI组件)   
            + maoStateToProps  映射状态，返回值是一个对象
            + mapDispatchToProps  映射操作状态的方法，返回值是一个对象
    + mapDispatchToProps 可以是 函数，也可以是一个对象

求和案例中react-redux的优化

    + 容器组件和UI组件可以整合为一个文件
    + 无需自己给容器组件传递store   给APP包裹一个<Provider store={store}>即可
    + 使用了react-redux后不同再自己检测redux中状态的改变，容器组件可以自动完成这个工作
    + mapDispatchToProps 简写为一个对象
    + 一个组件要和redux“打交道”要经过哪几步？
						(1).定义好UI组件---不暴露
						(2).引入connect生成一个容器组件，并暴露，写法如下：
								connect(
									state => ({key:value}), //映射状态
									{key:xxxxxAction} //映射操作状态的方法
								)(UI组件)
						(4).在UI组件中通过this.props.xxxxxxx读取和操作状态