Redux

一、组成

（一）State-状态（数据）

即为传递的数据，大致可分为三类：

• DomainDate：可以理解为服务器端的数据，比如：获取的用户信息，商品列表等
• UI State：决定当前UI展示的状态，比如：弹窗的显示与隐藏，受控组件等
• App State：App级别的状态，比如：当前当前是否请求loading，当前路由信息等可能被多个和组件去使用的到的状态   

（二）Action-事件（存储数据）

Action是把数据传到store的载体，它是store数据的唯一来源，一般来说，我们可以通过store.dispatch()将action传递给store

特点：

• 本质是js的普通对象
• Action对象内部必须要有一个type属性来表示要执行的动作（多数情况下type属性会被定义为字符串常量）
• 除了type字段外，Action的结构随意进行定义
• 项目中，更多的会用Action创建函数（就是创建Action的地方）
• 只是描述有事件发生，并没有描述如何去更新state

（三）Reducer

本质是一个函数，用来相应发送过来的actions，然后经过处理，把state发送给Store

接收两个参数：（初始化）state、action

通过return返回值将数据发送给Store

（四）Store

把action和reducer联系在一起的对象

主要职责：

• 维持应用的state
• 提供getState()方法获取state
• 提供dispatch()方法发送action
• 通过subscribe()来注册监听
• 通过subscribe()返回值来注销监听

二、场景演示

以图书馆场景为例

• Component：组件，借书的用户
• Action：事件，描述要借什么书的一句话
• Store：图书管理员
• Reducer：记录本（书籍记录）

小C（Component）对图书管理员（Store）说：“我想借一本XX书”（Action），管理员通过查询记录本（Reducer）去找到这本书，找到后把书给到小C 

获取数据：

        组件想要获取Store中的数据，通过Action创建“我要获取XX数据”这句话，Store接收后，通过Reducer去查询这条数据，把数据传给组件

修改数据：

        Store通过Reducer知道如何改变数据，然后Store修改好后，告知组件，即可重新获取数据

三、React-redux

两个重要部分：

• Provider：这个组件能够使整个app都能获取到store中的数据
• connect：这个方法能够使组件跟store来进行关联

（一）Provider

• 包裹在根组件的最外层，使所有的子组件都可以拿到State
• 接收store作为props，然后通过context往下传递，这样react中任何组件都可以通过context获取到store

解决问题：容器组件可能存在很深的层级，防止一层一层去传递state

作用：让组件拿到state

原理：react中的context

（二）connect

• Provider内部组件如果想要使用state中的数据，就必须要connect进行一层包裹封装（即必须要被connect进行加强）
• connect就是方便我们组件能够获取到store中的state

四、流程梳理（React-redux）

 1、connect包裹Coma、Comb：

export default connect(null, mapDispatchToProps)(Coma)
export default connect(mapStateToProps)(Comb)

2、Coma写好mapDispatchToProps函数，将函数sendAction作为返回值（返回值为一个对象）

/**
 * 这个函数要有一个返回值,返回值是一个对象
 * */
const mapDispatchToProps = dispatch => {
  return {
    sendAction: ()=> {
      dispatch({
        type: 'add_action'
      })
    }
  }
}

3、Comb写好mapStateToProps 函数，返回获取到的数据state，供组件使用

const mapStateToProps = state => {
  return state
}

4、Coma按钮点击事件调用sendAction

onBlue = () => {
    // console.log(this.props)
    // 发送Action
    this.props.sendAction()
  }

5、Comb获取更新的state数据

{this.props.count}