Redux 入门学习2 （react-redux）

Redux 入门学习2 （react-redux）

React-redux概述

1. react-redux是redux官方推出用于配合React的绑定库。
2. react-redux两个重要组成部分（Provider组件，connect方法）。
3. Provider组件：用于包裹整个结构，让组件能够获取到store
4. connect方法：如果需要接收Provider提供的store，就需要组件通过connect加强。

react-redux 与redux 的区别就在于 redux 只能通过store.dispatch()来修改值和 subscriber（）来获取值，react-redux 可以通过对组件利用connect方法加强之后更加方便的可以获取和修改redux的数据，通过connect方法加强ui组件，可以传递两个函数 mapStateToProps和mapDispatchToProps来更加简单的读取和修改redux中的数据。

• mapStateToProps默认参数为 state，props，可以在函数中将state中要用的数据进行return，这样就会放在加强的组件中的props属性中了，这样在组件中就可以通过props.来获取需要的数据。

• mapDispatchToProps 默认参数为dispatch方法，可以在方法中定义修改redux数据的方法，定义好对应的action，利用参数 dispatch方法来进行发送的store，利用reducer函数来将发送的action进行处理，从而改变redux的数据。定义好方法也需要return，会在加强组件中props中出现，就可以调用对应的方法来改变不同的数据了。

React-redux 入门案例

设计两个组件一个组件，ComA，ComB，ComA负责改变数据，ComB负责接收改变的数据进行展示

1. 首先需要在react项目中安装依赖：redux和react-redux。命令如下

   //使用npm工具安装 
   npm instal redux  //npm 安装redux
   npm install react-redux  //npm 安装react-redux
   
   //使用yarn工具安装
   yarn add redux  //yarn  安装redux
   yarn add react-redux   //yarn 安装react-redux
   
   

2. 然后需要创建reducer函数 和 store。

   reducer.js

   const initState = {count:0};
   export const reducer = (state = initState, action) => {
       switch (action) {
           case "addCount": 
               return {
                   count: state.count + action.count
               }
           default:
               return state;
       }
   }
   
   

   store.js

   import {createStore} from "redux"; //导入createStore方法
   import {reducer} from "./reducer";  //导入自定义的reducer方法
   
   export const store = createStore(reducer);
   
   

3. 引入Provider组件，传入创建好的store。

   index.js

   import React, {Component} from 'react';
   import ComA from "./ComA";  //定义的组件a，用来发送数据
   import ComB from "./ComB";  //定义的组件b 用来接收数据并展示
   
   import {Provider} from "react-redux";
   import {store} from "./store";  //引入创建好的store
   
   class Index extends Component {
       render() {
           return (
               <div>
                   <h2>这是react-redux-demo</h2>
                   <Provider store={store}>   <!--引入创建的store-->
                       <ComA />
                       <ComB />
                   </Provider>
               </div>
           );
       }
   }
   export default Index;
   

4. 使用connect方法，对组件进行增强，增强处理可以使得组件具有接收和发送数据的能力。

   connect：React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。就是对ui组件进行加强，使其具有接收和发送数据的能力

   connect（mapStateToProps，mapDispatchToProps）（ui组件）

   mapStateToProps与mapDispatchToProps为两个需要传递的参数，都是函数，mapStateToProps控制接收数据，mapDispatchToProps控制发送数据，

   第二个括号需要传递要加强的ui组件

   mapStateToProps默认参数是（state，props）

   mapDispatchToProps的默认参数是dispatch方法

ComA.js

import React, {Component} from 'react';
import {connect} from "react-redux";
class ComA extends Component {
    addCount = ()=> {
        this.props.sendAction({count:1}); //执行属性中的发送action的方法
    }

    render() {
        console.log("ComA",this.props)
        return (
            <div>
                <button onClick={this.addCount}> + </button>
            </div>
        );
    }
}
//发送数据的增强函数
const mapDispatchToProps = dispatch => {
    return {
        //定义发送数据action的方法，可以返回多个
        sendAction : function (data) {
            dispatch({type: "addCount", ...data});
        }
    };
}

export default connect(null, mapDispatchToProps)(ComA);  //组件加强

ComB.js

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

class ComA extends Component {

    render() {
        console.log("ComB",this.props)  //如果是增强ui组件接收数据，那会默认一个dispatch方法，用于发送action
        return (
            <div>
               这是值：{this.props.count}
            </div>
        );
    }
}
//用于接收数据的增强函数，当state中的数据 发生变化时，才会触发。如果state未发生改变，则不会触发
const mapStateToProps = (state,props) => {
    console.log("ComBState",state);
    return state;
}

export default connect(mapStateToProps,null)(ComA);//增强ComA组件可以接收数据。