react-8（react-redux）

        可以看到上一篇react-7里的例子写法是比较复杂的，UI组件和容器（显示页面的UI和业务逻辑没有分离），可以使用react- redux处理一下。

---

react-redux

        在上一篇中我们知道了redux是什么和怎么样使用的，而react-redux就是可以帮助我们使用redux的时候简化代码。

        思想一：react-redux的作用就是将我们之前写的类组件改成函数组件（无状态组件）

                在react中提倡尽可能的使用函数组件，一旦数据要使用redux的时候一定要引入的react-redux,，引入之后，写的全部类组件都会成了函数组件，无状态组件就相当于没有state。

        为什么推荐使用函数组件呢？因为我们的数据全部交给了redux管理了，（由于不用管理state，函数组件的效率比类组件的快的。），正如上一篇的备忘录实例，我们都没有使用组件的state，所以上一篇的备忘录实例也是可以改为函数组件的。

        思想二：react-redux就是将UI组件和容器组件分开来。

        UI组件：就是我们写的没有state数据（没有状态）的组件，所有的数据都从容器组件里拿，也相当于子组件。

        容器组件：包裹UI组件的容器，给UI组件传数据，相当于父组件。容器组件推荐使用react-redux生成（调用react-redux的API生成），不需要我们自己写，容器组件的数据是直接从store中获取的。

        使用react-redux的connet方法生成容器组件将UI组件包裹，UI组件如果要拿数据，需要从props拿。

        所以如果把store绑定到根节点，那么内部的所有子组件都能用。就不用每个类组件内部都使用 this.state= store.getState() 来拿数据，直接用props获取就好了

提问：如果我引入了react-redux，可以不用引redux吗？

答案：不可以！redux是前提

---

安装

 yarn add react-redux 

---

React-Redux 将所有组件分成两大类：

        UI 组件（负责 UI 的呈现）

        容器组件（负责管理数据和逻辑）。

UI组件（我们写）

        1.只负责 UI 的呈现，不带有任何业务逻辑
        2.没有状态（即不使用this.state这个变量）
        3.所有数据都由参数（this.props）提供
        4.不使用任何 Redux 的 API
        5.因为不含有状态，UI 组件又称为"纯组件"，即它跟纯函数一样，纯粹由参数决定它的值。

容器组件（redux生成）
        1.负责管理数据和业务逻辑，不负责 UI 的呈现
        2.带有内部状态
        3.使用 Redux 的 API

UI 组件和容器组件的结合
        1.如果一个组件既有 UI 又有业务逻辑，那么将它拆分成两层结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。
        2.React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。

---

react- redux的方法与组件：

        一、connect(a,b)方法

                生成包裹UI组件的容器，只要调用，就能在UI组件外部生成一个容器组件，这个容器组件可以拿到外部store的数据，在UI组件中使用这些数据需要用this.props获取，可以想象成UI组件的父组件。

                方法有很多个参数，重点注意前两个参数，a是一个函数，b也是一个函数（后面介绍这两个函数），这两个函数都可以直接返回一个对象，返回对象之后，a返回的是属性，就是数据，b返回的对象里放的是方法（很多时候放的是一些事件处理函数）

                  connect(mapStateToProps,mapDispatchToProps)(UI组件)，UI组件调用的属性都在这两个参数里。 

        二、mapStateToProps(state,ownProps)方法

                1.mapStateToProps是一个函数。它的作用是建立一个从外部state对象到 UI 组件的props对象的映射关系。执行后返回一个对象，里面的每一个键值对就是一个映射。（将仓库的state数据映射到组件的props）
                  2.mapStateToProps会订阅（绑定） Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。（自动订阅数据，不用我们再手动绑定数据了）
                  3.mapStateToProps的第一个参数总是state对象（仓库中的所有数据），还可以使用第二个参数，代表容器组件的props对象。使用ownProps作为参数后，如果容器组件的参数发生变化，也会引发 UI 组件重新渲染。
                  4.如果connect方法省略mapStateToProps参数，那么UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。 

        三、mapDispatchToProps(dispatch,ownProps)方法

                1.mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了用户的哪些操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。（会在这里写store.dispatch分发，方法里放事件处理程序，事件处理程序里分发action）
                  2.如果mapDispatchToProps是一个函数，会得到dispatch和ownProps（容器组件的props对象）两个参数，应该返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。（可以直接调用dispatch，而不用调用store.dispatch)
                  3.如果mapDispatchToProps是一个对象，它的每个键名也是对应 UI 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由 Redux 自动发出 

        四、 组件

        connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。一种解决方法是将state对象作为参数，传入容器组件。但是容器组件可能在很深的层级，一级级将state传下去就很麻烦。  

        React-Redux 提供Provider组件，可以让容器组件拿到state。Provider组件就是一个提供者，提供一个store给Provider内部的组件，可以当成一个根组件，Provider组件可以写上一个store属性，等于的值就是我们写的store对象 ，这样就完成了根组件与store绑定的过程。在根组件外面包了一层Provider，App的所有子组件都可以拿到state了。它的原理是React组件的context属性，store放在了上下文对象context上面。React-Redux自动生成的容器组件的代码，就类似下面这样，然后子组件就可以从context拿到store。

---

简单例子：

将store提供给根组件，index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux'
import store from './day7/store'

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);
reportWebVitals();

pages -> test2.js文件

import React from 'react'
import { connect } from 'react-redux'
import {changeTest2} from '../store/actionCreators/test2Action'
const test2 = (props)=>{
    return (
        
{JSON.stringify(props)}
            修改test2
        
    )
}
const mapStateToProps = (state,ownProps) =>{
    return {
        test:state.test2.msg
    }
}
const mapDispatchToProps = (dispatch,ownProps)=>{
    return {
        changeTest2 : ()=>{
            dispatch(changeTest2('111112222'))
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(test2) 

actionCreators -> test2Action.js文件

//test2的Action创造器
export const changeTest2 = (value)=>{
    return {
        type:'CHANGE_TEST2',
        value
    }
}

reducers -> test2Reducer.js文件 

//test2Reducer
let test2State={
    msg:'test2'
}
const reducer = (state = test2State,action)=>{
    if(action.type === 'CHANGE_TEST2'){
        return {
            ...state,
            msg:action.value
        }
    }
    return state;
}
export default reducer

store -> index.js文件

import { combineReducers, createStore } from 'redux'
import test1Reducer from './reducers/test1Reducer'
import test2Reducer from './reducers/test2Reducer'

//合并reducer
const reducers = combineReducers({
    test1:test1Reducer,
    test2:test2Reducer
})

//合并后的reducer的初始化数据
/**
  {
   test1:{
        msg:'test1',
    },
    test2:{
        msg:'test2'
    }
  }
 */

//创建仓库
const store = createStore(reducers)
export default store