一、react-redux的介绍

二、react-redux的使用

npm install react-redux
2.2、创建相应的文件
 2.2.1、既然要实现数据共享，那么肯定要两个组件，每个组件都要创建对应的
 action文件，reducers文件。可以去参考上一篇文章
 2.2.2、如何把UI组件和容器组件定义在同一个文件中(实例)
 
import React, { Component } from 'react'
import { creDecAction, creIncAction } from '../../redux/actions/count'
//引入 connect用于连接UI组件与redux
import {connect} from 'react-redux'
 class Count extends Component {
    increment = ()=>{
      const {value} = this.selectNumber
      this.props.jia(value*1);
    decrement = ()=>{
      const {value} = this.selectNumber
      this.props.jian(value*1);
    //奇数再加
    incrementIfOdd = ()=>{
      const {value} = this.selectNumber
      this.props.jia(value*1);
    //异步加
    incrementAsync = ()=>{
      const {value} = this.selectNumber
      this.props.jia(value*1);
    render() {
      const { count } = this.props
      return (
          <h1>我是 Count组件 ,下方组件总人数为：{this.props.renSu} </h1>
          <h3>当前求和为: {count}</h3>
          <select ref={c=>this.selectNumber=c} >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <button onClick={this.increment}>+</button>
          <button onClick={this.decrement}>-</button>
          <button onClick={this.incrementIfOdd}>当前求和为奇数在加</button>
          <button onClick={this.incrementAsync}>异步加</button>
        </div>
// a函数 的返回值为一个对象 作为状态传递给 UI组件
// function mapStateToPreps(state){
//     return {count:state}
// // a函数 的返回值作为一个对象 里面有各种方法 操作状态的方法 传递给 UI组件
// function mapDispatchToProps(dispatch){
//     return {
//         jia:(number)=>{
//             dispatch(creIncAction(number))
//         },
//         jian:(number)=>{
//             dispatch(creDecAction(number))
//         }
//     }
// //创建并暴露一个 Count的容器组件
// export default  connect(mapStateToPreps,mapDispatchToProps)(CountUI)
//简写方法
export default  connect(
    state => ({
      count:state.he,
      renSu:state.rens.length
    }),
        jia:creIncAction,
        jian:creDecAction
    )(Count)
2.3、实现数据互通
 2.3.1、汇总所有 reducer
 我们这次有两个组件的 reducer,但是在store中createStore()方法只能传入一个reducer,
 这个时候我们就需要把多个reducer 汇总为一个reducer:
 
// combineReducers 如果要 redux 管理多个状态，请引入它
import { createStore,applyMiddleware,combineReducers } from 'redux'
//导入 redux-thunk，用于支持异步 action
import thunk from 'redux-thunk'
import countReducer from './reducers/count'
import personReducer from './reducers/person'
//汇总所有的 reducer 变为一个总的 reducer
const allReducer = combineReducers({
    he:countReducer, 
    rens:personReducer
export default createStore(allReducer,applyMiddleware(thunk))
combineReducers()方法介绍：
 传入一个对象，属性名随便取，值为你要管理的状态的值
 
2.3.2、再入口文件index.js中/用 Provider 包裹 App
 
const Root = ReactDOM.createRoot(document.getElementById('root'))
Root.render(
     //用 Provider 包裹 App,将 store 传递给 Provider。供App中所有容器组件使用其中的状态
     <Provider store={store}>
          <App />
     </Provider>
2.3.3、使用其他组件的状态
 在暴露容器组件的位置：
 
export default  connect(
    state => ({
      count:state.he,
      renSu:state.rens.length
    }),
        jia:creIncAction,
        jian:creDecAction
    )(Count)
connect()方法的第一个参数为一个函数，函数会默认传入一个state
 这个state身上就包含了我们使用redux管理的所有状态，根据自己的需要读取就行，
 读取后会存在props中。
 个人博客：余生的学习笔记
                                    Redux 是 React 框架下的一款状态管理工具，可以实现多个组件之间的数据共享和传递。学习和掌握 Redux 以及周边生态可以使我们更好的进行 React 项目开发。下面我们就详细的讲述 Redux 在实际项目开发中的使用。
                                    1️⃣定义一个Person组件，和Count组件通过redux共享数据。2️⃣为Person组件编写：reducer、action，配置constant常量。3️⃣重点：Person的reducer和Count的Reducer要使用combineReducers进行合并。合并后的总状态是一个对象！！！4️⃣交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。今天的分享就到这里啦✨\textcolor{red}{今天的分享就到这里啦✨}今天的分享就到这里啦✨。.........
                                    是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。： 对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据，如果传入的数据格式不对，可能会导致组件内部报错。Context提供了两个组件：Provider组件(用来提供数据)，Consumer组件(用来消费数据)。利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。
                                    在这个示例中，我们定义了一个上下文对象和提供器组件，以及一个自定义钩子函数来访问上下文对象的值。通过使用上下文，我们可以避免将数据通过多层组件进行传递，而是直接在需要的组件中访问共享的数据。我们将创建一个示例，展示如何使用上下文来共享一个数据对象，并在需要的组件中进行更新。我们在组件中展示了共享数据的值，并提供了一个按钮来触发更新数据的操作。接下来，我们需要创建一个提供器组件，用于将数据提供给需要的组件，并提供更新数据的方法。现在，我们已经定义了上下文对象和提供器组件，我们可以在需要的组件中使用它们了。
                                    React与Vue 数据通信相同，属于单向数据流，所以非父子组件共享数据用常规方法，代码会变得非常冗余。所以下面介绍了几种数据共享的方法。
1、React 提供的 Context  类似Vue中的 Provid Reject
初始化：React.createContext() 用来创建共享数据上下文对象
const defaultValue = {
//创建对象并导出
const MyContext  = React.createContext(defaultVal
在写完了基本的 Redux 案例之后，我们可以尝试一些更实战性的操作，比如我们可以试试多组件间的状态传递，相互之间的交互
如上动图所示，我们想要实现上面的案例，采用纯 React 来实现是比较困难的，我们需要很多层的数据交换才能实现，但
//引入createStore,，专门用于创建redux中最核心的store对象
import {createStore, applyMiddleware， combineReducers} from 'redux';
//引入为Count组件服务的reducer
import countReducer from './reducers/count'
import person