React-redux

React-redux概述

React与redux的关系

redux与react没有直接关系。redux支持react，angular，jquery等库，只是redux与react搭配更加好用。

React-redux

React-Redux 是 Redux 的官方 React 绑定库。

React-Redux 能够使React组件从Redux store中读取数据，并且向 store 分发 actions 以更新数据。

React-Redux 并不是 Redux 内置，需要单独安装。

React-Redux 一般会和 Redux 结合一起使用。

React-redux中两个重要成员

Provider组件

Provider组件能够使整个程序都能获取到store中的数据。

Provider组件包裹在根组价最外层，使所有的子组件都可以拿到State。

Provider接收store作为props,然后通过context往下传递，这样react中的任何组件都可以通过context获取store。

connect方法

这个方法能够使组件和store进行关联。

Provider内部组件如果想要使用state中的数据就必须要connext进行一层包装封装，换句话说就是必须要被connect进行加强。

connect就是方便我们组件能够获取到store中的state。

React-redux的基本使用

安装redux、react-redux

react-redux不是react官方所提供的，所以需要进行安装react-redux。

react-redux还需要依赖Redux中的store，所以还需要安装redux。

npm  install  redux
npm install react-redux

创建两个组件ComA为一个button按钮

import React from "react";
class ComA extends React.Component{
    render() {
        return(
            <button> + </button>
        )
    }
}

创建组件ComB是一个显示区

import React from "react";
class ComB extends React.Component{
    render() {
        return(
            <div>1</div>
        )
    }
}

在App.js中引入组件A和组件B

import React from "react";
//导入组件A
import ComA from "../pages/ComA/ComA";
//导入组件B
import ComB from "../pages/ComB/ComB";
function App(){
    return (
            <div>
                <ComA/>
                <ComB/>
            </div>
    )
}
export default App;

创建reducer

exports.reducer = (state,action)=>{
     return state
}

创建store

import {createStore} from "redux";
//导入reducer处理函数
import {reducer} from '../Reducer/Reducer'

const store = createStore(reducer)

export default store;

Provider的使用

❶在app.js中导入Provider组件，从react-redux中导入。

❷利用Provider组件对我们整个组件进行包裹。

❸给Provider组件设置store属性，store的属性值为createStore创建出来的实例store。

import React from "react";
//导入Provider组件,利用组件包裹结构，维护store
import {Provider} from "react-redux";
//导入store
import store from "../Store/Store";
//导入组件A
import ComA from "../pages/ComA/ComA";
//导入组件B
import ComB from "../pages/ComB/ComB";
function App(){
    return (
        <Provider store={store}>
            <div>
                <ComA/>
                <ComB/>
            </div>
        </Provider>
    )
}
export default App;

connect的使用

导入connext方法

import { connect } from "react-redux";

调用connect方法

connect(...)(Component)

connect方法会有一个返回值，而这个返回值就是加强后的组件

connect参数说明

参数名	类型	说明
mapStateToProps(state,ownProps)	Function	这个函数允许我们将state中的数据作为props绑定到组件上 state:redux中的store ownProps：自己的props
mapDispatchToProps(dispatch,ownProps)	Function	将action作为props绑定到我们自己的函数中 dispatch:就是store.dispatch() ownProps：自己的props
mergeProps(stateProps,dispatchProps,ownProps)	Function	不管是stateProps还是disoatchProps,都需要和ownProps merge之后才会被赋给组件，通常情况下可以不传这个参数，connect会使用Object.assifn替代这个方法
options	Object	可以制定connector的行为

组件A发送Action

❶导入connect
❷利用connect对组件进行加强，connect的第一个参数是要接收数组的函数，第二个参数是要发送Action的函数。最后一个括号是要加强的组件。也就是connect(要接收数组的函数,要发送Action的函数)(要放入加强的组件)。
❸组件A是发送Action，即实现第二个参数
❹构建函数，mapDispathtoProps(dispatch)，dispatch用来发送Action。
在mapDispathtoProps(dispatch)中返回一个对象，key是方法名，value调用dispatch去发送Action。
❺在组件的内部就可以通过this.props拿到key方法了。

import React from "react";
//导入connect
import {connect} from "react-redux";

class ComA extends React.Component{
    Click = () =>{
        console.log('ComA',this.props)
        //发送Action
        this.props.sendAction()
    }
    render() {
        return(
            <button onClick={this.Click}> + </button>
        )
    }
}
const mapDispathtoProps = (dispatch)=>{
    return{
        sendAction:()=>{
            //利用dispatch发送Action
            //Action对象需要有type属性
            dispatch({
                type:'add_type'
            })
        }
    }
}
//组件A为发送方，需要实现connect第二个参数
export default connect(null,mapDispathtoProps)(ComA);

组件B实现接收

❶导入connect
❷利用connect对组件进行加强。
❸组件B是接收方，需要实现connect的第一个参数mapStateToProps
❹mapStateToProps里的第一个参数就是我们需要的state。
❺需要将state返回才能在组件内部获取到最新的数据
❻comB能否拿到数据关键在于reducer，只有reducer里面返回了新的state的时候，我们才能获取到数据。

import React from "react";
//导入connect
import { connect } from "react-redux";

class ComB extends React.Component{
    render() {
        console.log('ComB', this.props)
        return(
            <div>{this.props.count}</div>
        )
    }
}
const mapStateToProps = (state) =>{
    console.log('ComB',state);
    return state;
}
//组件B接收，需要实现第一个参数
export default connect(mapStateToProps)(ComB);

reducer接收Action，然后进行逻辑处理

//reducer要接收Action然后进行逻辑处理
const initState = {//初始值
    count:0
}
exports.reducer = (state = initState,action)=>{
    console.log('reducer',action);
    switch (action.type){
        case 'add_type':
            return{
                count: state.count+1
            }
        default:
            return state
    }
}

结果展示

数据传递流程

小结

安装相关的依赖

构建store和reducer

搭建页面结构

Provider组件的实现

connect方法的实现（发送和接收）