# React-Redux基本使用

# 快速介绍

react-redux是Redux的官方React绑定库。它的目的是优化React组件和Redux store的交互。

# Provider

react-redux提供Provider组件，利用React的context原理，将redux store提供给后代组件，使整个app都能访问到redux store。

import React from "react";
import ReactDOM from "react-dom";

import { Provider } from "react-redux";
import store from "./store";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

# connect()()

connect是react-redux提供的一个高阶函数。它用于连接(导入)Provider中的store到当前组件。

该方法提供四个可选参数：[mapStateToProps], [mapDispatchToProps], [mergeProps], [options]。
常用的就前两个。

# mapStateToProps(state,[ownProps])

如果定义该参数，组件将会监听 Redux store 的变化。任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象，这个对象会与组件其他的 props 合并。
如果省略了该参数，组件将不会监听 Redux store的变化。

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

# mapDispatchToProps

该参数可以是一个函数或者对象。

当该参数是函数时 : 接受dispacth和ownProps两个参数，后者可选；返回一个用于分发action的对象。

let mapDispatchToProps = (dispatch,ownProps) => {
    return {
        addNum: (num) => {
            dispatch(AddNum(num))
        },
        subNum: (num) => {
            dispatch(SubNum(num))
        }
    }
};

当该参数是对象时 ：对象的每一项都必须是一个action creator。

let mapDispatchToProps = {
    AddNum,SubNum
};
// 这种写法时，react-redux自动dispatch。

# connect使用示例

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {AddNum, SubNum} from "../../store/actions";  // action creators

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

// 函数写法
// let mapDispatchToProps = (dispatch) => {
//     return {
//         addNum: (num) => {
//             dispatch(AddNum(num))
//         },
//         subNum: (num) => {
//             dispatch(SubNum(num))
//         }
//     }
// };

// 对象写法
let mapDispatchToProps = {
    AddNum,SubNum
};

@connect(mapStateToProps, mapDispatchToProps)
class Home extends Component {
    subNum = () => {
        this.props.SubNum(2);
        // this.props.dispatch(SubNum(2));  // 不传mapDispatchToProps时
    };
    addNum = () => {
        this.props.AddNum(2);
        // this.props.dispatch(AddNum(2));
    };

    render() {
        console.log(this.props);
        return (
            <div>
                <button onClick={this.subNum}>-</button>
                {this.props.num}
                <button onClick={this.addNum}>+</button>
            </div>
        );
    }
}

export default Home;