redux解决组件间通信(常用)

安装react-redux redux是通过属性传递数据实现的

回顾一下vuex 组件间通信  发布消息的方法 commit 和dispatch 获取store数据 state，getters

同样，react-redux提供了connect方法和Provider组件 

 

connect函数

（connect 为组件提供state数据和dispatch方法 接收Provider提供的数据源）

参数：参数函数1：如何为组件属性拓展state数据

　　　　　　　　　参数：state数据  

　　　　　　　　　返回值 为组件属性拓展的state数据

　　　参数函数2：如何为组件属性拓展dispatch方法

　　　　　　　　　参数：dispatch方法

　　　　　　　　　返回值 组件属性拓展的dispatch方法

返回值 一个高阶函数 该函数创建的高阶组件可以接收state数据和dispatch方法

　　　　　　　　　　没有通过该函数处理的组件(包括原组件) 不会接收state数据和dispatch方法

Provider组件

(provider组件为组件提供store数据源)

　　通过store属性提供数据源， 属性值就是store对象

　　我们可以将组件放在Provider内部，就可以接收数据

 

react中使用redux

1.connect方法拓展组件 接收state 和dispatch

2.通过Provider组件提供store数据源

让其它组件接收state数据和dispatch方法两种方式

1.可以通过父子通信的方法，传递数据和方法

2.继续使用connect方法得到的高阶函数去拓展组件

import React, { Component } from "react";
import {render} from 'react-dom';
import {createStore} from 'redux';
import {connect, Provider} from 'react-redux';

const ADD_NUM = 'ADD_NUM';
const DEL_NUM = 'DEL_NUM';
// action
let addNum5 = { type: ADD_NUM, data: 5};
let delNum2 = { type: DEL_NUM, data: 2};

// reducers
function reducer(state = 0, action) {
    switch (action.type) {
        case ADD_NUM : 
        state += action.data;
        break;
        case DEL_NUM :
        state -= action.data;
        break;
        default:;
    }
    return state;
}
let store = createStore(reducer);

class App extends Component {
    delNum() {
        this.props.dispatch(delNum2)
    }

    render() {
        console.log('app', this.props);
        let {state, doubleNum} = this.props
        return (
            <div>
                <button onClick={e => this.delNum()}>减少2</button>
                <hr/>
                {/* 兄弟间通信 */}
                {/* 方式1.可以通过父子通信的方法，传递数据和方法 */}
                <ShowNum state={state} doubleNum={ doubleNum }></ShowNum>
                <hr/>
                {/* <AddNum></AddNum> */}
                {/* 方式2.继续使用connect方法得到的高阶函数去拓展组件 */}
                <DealAddNum></DealAddNum>
            </div>
        )
    }
}
class AddNum extends Component {
    render() {
        console.log('addnum', this.props);
        return (
            <div>
                <button onClick={e => this.props.dispatch(addNum5)}>增加5</button>
            </div>
        )
    }
}
class ShowNum extends Component {
    render() {
        console.log('showNum', this.props);
       return (
        <div>
            <h1>num:{this.props.state} - {this.props.doubleNum()}</h1>
        </div>
       )
    }
}
// 1定义高阶函数 connect返回值是一个高阶函数
let deal = connect(
    // state => {
    //     return state;
    // }
    // 简写写在()就不认为是一个函数体
    state => ({
        state, 
        // 模拟vuex中getters, 一般不用
        doubleNum: () => state * 2
    }),
    dispatch => ({
        dispatch,
        // 还可以拓展更多的方
        })
)
// 1定义高阶组件接收
let DealApp = deal(App);
//方式2.继续使用connect方法得到的高阶函数去拓展组件
let DealAddNum = deal(AddNum);

// 组件渲染前发布消息(不会丢失)
// store.dispatch(addNum5)

// 1使用高级组件代替原来的组件
render(
//  2Provider store属性提供数据源
<Provider store= {store}>
  <DealApp></DealApp>  
</Provider>
, app);