Redux

是js容器，用于进行全局的状态管理
它可以用在react, angular, vue等项目中, 但基本与react配合使用
三大核心：
- 单一数据源
  - 整个应用的state被存储在一棵 object tree中，并且这个 object tree只存在于一个唯一的 store 中
- State是只读的
  - 唯一改变state的方法就是触发action，action 是一个用来描述已发生事件的普通对象
- 使用纯函数来修饰
  - 为了描述 action 如何改变state tree，需要编写 reducers;
  - reducer 是纯函数，它接收先前的 state 和 action,并且返回新的 state.
  - 可以复用，可以控制顺序、传入附加参数
Redux组成
- state:
  - 指传递的数据；可以分为以下三类
  - DomainDate: 服务端的数据
  - UI state: 展示ui 状态等
  - App state: App级别的状态；
- Action:
  - 把数据从应用传到 store 的载体，它是 store 数据的唯一来源。一般来说可以通过 store.dispatch() 将 action 传递给 store
  - js对象； 用来描述已发生事件的普通对象；对象内部必须要有一个 type 属性来表示要执行的动作
- Reducer:
  - 函数
  - 用来响应发送过来的action,然后经过处理，把 state 发送给 store
  - 注意：需要 return 返回值；函数会接受两个参数，第一个是初始化的state,第二个是action
- Store :
  - store就是把 action 与 reducer 联系到一起的对象
  - 通过creatStore创建
React-redux

React-redux概述
- react-redux 是 redux 官方出的；用于配合 react 的绑定库
- react-redux 能够使你的 react 组件从 redux store 中方便的读取数据，并且向 store 中分发 actions 以此来更新数据
- 两个重要成员： Provider 和 connect
- Provider
  - Provider 包裹在根组件最外层，使所有组件都可以拿到 state
  - Provider 接收 store 作为props,然后通过 context 往下传递，这样 react中任何组件都可以通过 cntext 获取到 store
```
 import { Provider } from "react-redux";
 ReactDOM.render(
       <Provider store={store}>
          ...字组件...
       </Provider>
     ,
     document.getElementById('root')
   );
```
- connect
  - Provider 内部组件如果想要使用到 state中的数据，就必须要 connect 进行一层包裹，换句话说就是必须要被 connect 进行加强
  - connect 就是方便我们组件能够获取到 store中的 state

React-redux基本使用

安装

 yarn add react-redux
 npm install react-redux

//react-redux 还需要依赖 redux 中的 store,所以还需要安装 redux
npm install redux

用 redux 来构建 store

创建 reducer/index.js 文件，构建reducer来响应 actions
创建 store/index.js 文件，通过createStore方法，把reducer 传进来

  //store/index.js
    import  { createStore } from "redux"
    import { reducer } from "./reducer"
    export default createStore(reducer)
 // reducer/index.js 
 const initState = { count:0 }
 export.reducer = ( state = inistate, action ) => {
  switch (action.type){
    case 'add_action':
    return {
        count: state.count + 1
    }
    default: 
      return state;
  }
 }

在 app.js中引入 store

引入 Provider 组件

在app.js 中导入 Provider 组件
利用 Provider 组件将整个结构进行包裹，并传递 store

 import { Provider } from 'react-redux'
 function App(){
  return (<Provider store={store}> ... </Provider>)
 }

connect 使用
- 导入
- 调用
- connect 方法会有一个返回值，而返回值就是加强之后的组件
```
 import { connect } from 'react-redux'
 connect(mapStateToProps,mapDispatchToProps) (Cpmponent)
```
- connect 参数说明：
  - mapStateToProps(state,ownProps) ：函数类型；主要用来获取store中的数据
  - mapDispatchToProps(dispatch,ownProps)：函数类型；主要用于触发action

用 connect 方法让组件与 store 关联

在组件 A 和组件 B 中分别导入 connect 方法

利用 connect 方法对组件进行加强，并导出

 import { connect } from 'react-redux'
 connect(mapStateToProps,mapDispatchToProps) (CpmponentA)
 //例如 组件A 是发送方
 class ComA  extends React.Component{
    handleClick = () => {
    this.props.sendAction()
   }
      render(){
       return <button onClick={this.handleClick}> + </button>
      }
   }
const mapDispatchToProps = dispatch => {
 return {
   sendAction: () => {
    dispatch({
       type: 'add_action'
     })
   }
  }
}
export default connect(null,mapDispatchToProps) (ComA)
//例如 组件B 是接收方
  class ComB  extends React.Component{
      render(){
       return <div>{this.props.count} </div>
      }
   }
const mapStateToProps = state => {
   return state
  }
}
export default connect(mapStateToProps) (ComB)