[JavaScript知识库]React-redux高阶组件应用

react-redux的使用必须依赖redux使用,所以在开始敲代码之前,要先下载好这两个依赖。

redux下载

npm install --save redux

react-redux下载

npm install --save react-redux 

react-redux使用方法

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）

一、UI组件的含义

• 只负责 UI 的呈现，不带有任何业务逻辑
• 没有状态（即不使用this.state这个变量）
• 所有数据都由参数（this.props）提供
• 不使用任何 Redux 的 API

二、容器组件

• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态
• 使用 Redux 的 API

其中UI组件和容器组件各司其职，UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

react-redux怎样使用（搭配计数器小案例实现）

一、在App组件中引入Provider，

import { Provider } from 'react-redux'

使用Provider标签将根组件包裹起来，注意添加store={引进来的redux仓库}

 return (
            <Provider store={store}>
                <div>
                    <CmdA></CmdA>
                    <CmdB></CmdB>
                </div>
            </Provider>

        )

这样一来，我们就可以子组件中用connect直接进行数据的操作了。

二、在每个子组件都中引入connect

import { connect } from 'react-redux'

react-redux是由发送方=》reducer函数处理=》接收方这个格式来完成的，
这个小型计数器案例是实现了一个点击按钮添加的功能，所以我们把按钮和显示的数据分成两个组件，显然，点击的按钮是发送方，而另一个接受数据的组件是接收方。

三、1、实现connect方法的代码

class CmdA extends Component {
     
     add=()=>{
         return ()=>{
             this.props.setAction()
         }
     }

    render() {
        return (
            <div>
                <button onClick={this.add()}>add</button>
            </div>
        )
    }
}
const mapdispatchToProps=(dispatch)=>{
    return {
        setAction:()=>{
            dispatch({
                type:'adds'
            })
        }
    }
}

export default connect(null,mapdispatchToProps)(CmdA)

直接抛出一个connect()()，第一个参数是接收或者发送的方法，第二个参数是接收或者发送的组件

const 发送的方法名，里面必须要return一个对象，所以最好在对象内写一个函数并将dispatch的方法封在内部，这样，在组件内部的add方法中直接调用this.props.setAction（）就可以直接拿到调用到dispatch方法了。（connect内部抛出的所有东西在传到了组件内的props中）

三、2、reducer内部的代码
这里跟redux的代码基本一模一样。

const reducer = (state,action)=>{
    
    if(action.type === "adds"){
        return {
            a:state.a +1
        }
    }

    return state;
}

export default reducer

三、3、connect接收操作
发送方的数据被reducer处理后，会由接收方接收，具体代码是

import React, { Component } from 'react'
import { connect } from 'react-redux'

class CmdB extends Component {
    render() {
        return (
            <div>
                {this.props.a}
            </div>
        )
    }
}

const mapStateToProps=(state)=>{
    return state;
}

export default connect(mapStateToProps,null)(CmdB)

react-redux具体可以由一张图解释