redux（三）react-redux容器组件链接UI组件映射store中的state到props

cnpm i react-redux，然后在App.js中引入react-redux的Provider组件(react-redux的容器组件,始终在最外层)，引入当前目录下store下的store.js，将store传递给Provider组件:

App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Todos from "./components/Todos"
import Number2 from './Number2'

import {Provider} from 'react-redux';
import store from './store/store';
class App extends Component {
  render() {
    return (
    	<Provider store={store}>
		    <div className="App">
		        <Todos />
		        <hr/>
		        <Number2/>
		    </div>
      </Provider>
    );
  }
}

export default App;

在Number2组件中引入react-redux的connect函数，不再需要之前的actions.js文件了，但是需要actionCreator.js：

import React, { Component } from 'react';
// import actions from "../store/number/actions";不需要了
// import store from "../store/store";不需要了
import actionCreator from "../store/number/actionCreator"; //需要actionCreator中的action
import {connect} from 'react-redux';
class Number2 extends Component {
  constructor(){
    super();
    this.state = {
    	val: "0"
    }
  }
  render() {
  	console.log(this.props)
    return (
      <div>
        <button>++</button>
        <input type="text" />
        <button >--</button>
      </div>
    );
  }
}

let Connected = connect(state=>state)(Number2);//此时就能获取store中的state了，14行测试打印结果

export default Connected;

14行输出之前定义的state：

connect函数可以接受两个参数，两个都是回调函数，第一个回调函数中接收store中的state，意思是将store中的state映射到Number2组件的props中，第二个回调函数中接收store的dispatch，返回一个对象，对象包含所需的action的dispatch函数：

import React, { Component } from 'react';
// import actions from "../store/number/actions";不需要了
// import store from "../store/store";不需要了
import actionCreator from "../store/number/actionCreator"; //需要actionCreator中的action
import {connect} from 'react-redux';
class Number2 extends Component {
  constructor(){
    super();
    this.state = {
    	val: "0"
    }
  }
  render() {
  	console.log(this.props)
    return (
      <div>
        <button>++</button>
        <input type="text" />
        <button >--</button>
      </div>
    );
  }
}

let mapDispatchToProps = (dispatch)=>{
	return {
		add(){
			dispatch(actionCreator.intNumber());
		},
		sub(){
			dispatch(actionCreator.decNumber());
		},
		input(val){
			dispatch(actionCreator.inputNumber(val));
		}
	}
}

let Connected = connect(state=>state, mapDispatchToProps)(Number2);//链接容器组件到UI组件，此时就能获取store中的state了，14行测试打印结果
/*connect函数可以接受两个参数，两个都是回调函数，第一个回调函数中接收store中的state，return state或一个对象，
意思是将store中的state映射到Number2组件的props中，第二个回调函数中接收store的dispatch，
返回一个对象，对象包含所需的action的dispatch函数*/


export default Connected;

此时Number2组件中就直接在props中获取并发送对应的action了：

import React, { Component } from 'react';
// import actions from "../store/number/actions";不需要了
// import store from "../store/store";不需要了
import actionCreator from "../store/number/actionCreator"; //需要actionCreator中的action
import {connect} from 'react-redux';
class Number2 extends Component {
  // constructor(){
  //   super();
  //   this.state = {
  //   	val: "0"
  //   }
  // }
  render() {
  	console.log(this.props)
  	let {add, sub, input, number} = this.props;
    return (
      <div>
        <button onClick={add}>++</button>
        <input type="text" value={number.number} onChange={(e)=>input(e.target.value)}/>
        <button onClick={sub}>--</button>
      </div>
    );
  }
}

let mapDispatchToProps = (dispatch)=>{
	return {
		add(){
			dispatch(actionCreator.intNumber());
		},
		sub(){
			dispatch(actionCreator.decNumber());
		},
		input(val){
			dispatch(actionCreator.inputNumber(val));
		}
	}
}

let Connected = connect(state=>state, mapDispatchToProps)(Number2);//链接容器组件到UI组件，此时就能获取store中的state了，14行测试打印结果
/*connect函数可以接受两个参数，两个都是回调函数，第一个回调函数中接收store中的state，return state或一个对象，
意思是将store中的state映射到Number2组件的props中，第二个回调函数中接收store的dispatch，
返回一个对象，对象包含所需的action的dispatch函数*/


export default Connected;

测试没毛病！

不过这种方式需要一条一条手动写出每个action才能映射到props，还有一种方式，引入redux的bindActionCreators，再将上面代码改为如下：

import React, { Component } from 'react';
// import actions from "../store/number/actions";不需要了
// import store from "../store/store";不需要了
import actionCreator from "../store/number/actionCreator"; //需要actionCreator中的action
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class Number2 extends Component {
  render() {
  	console.log(this.props)
  	// let {add, sub, input, number} = this.props;
    // return (
    //   <div>
    //     <button onClick={add}>++</button>
    //     <input type="text" value={number.number} onChange={(e)=>input(e.target.value)}/>
    //     <button onClick={sub}>--</button>
    //   </div>
    // );
    let {methods, number} = this.props;
    return (
      <div>
        <button onClick={methods.intNumber}>++</button>
        <input type="text" value={number.number} onChange={(e)=>methods.inputNumber(e.target.value)}/>
        <button onClick={methods.decNumber}>--</button>
      </div>
    );
  }
}

let mapDispatchToProps = (dispatch)=>{
	return {
		// add(){
		// 	dispatch(actionCreator.intNumber());
		// },
		// sub(){
		// 	dispatch(actionCreator.decNumber());
		// },
		// input(val){
		// 	dispatch(actionCreator.inputNumber(val));
		// }

		/*传入actionCreator和dispatch，此时无论有多少action全都映射到props.methods中，相当于语法糖*/
		methods: bindActionCreators(actionCreator, dispatch)
	}
}

let Connected = connect(state=>state, mapDispatchToProps)(Number2);//链接容器组件到UI组件，此时就能获取store中的state了，14行测试打印结果
/*connect函数可以接受两个参数，两个都是回调函数，第一个回调函数中接收store中的state，return state或一个对象，
意思是将store中的state映射到Number2组件的props中，第二个回调函数中接收store的dispatch，
返回一个对象，对象包含所需的action的dispatch函数*/


export default Connected;

同样connect函数的第一个函数参数也可以提取出来，提取出来有一个好处，可以定义一个类似计算属性的属性：

let mapDispatchToProps = dispatch=>{
	return {
		// add(){
		// 	dispatch(actionCreator.intNumber());
		// },
		// sub(){
		// 	dispatch(actionCreator.decNumber());
		// },
		// input(val){
		// 	dispatch(actionCreator.inputNumber(val));
		// }

		/*传入actionCreator和dispatch，此时无论有多少action全都映射到props.methods中，相当于语法糖*/
		methods: bindActionCreators(actionCreator, dispatch)
	}
}

let mapStateToProps = state=>{
	return {
		number: state.number,
		numberSquare: Math.pow(state.number.number, 2)//将第一个函数提出来写的好处就在这
	}
}

// let Connected = connect(state=>state, mapDispatchToProps)(Number2);//链接容器组件到ui，此时就能获取store中的state了，14行测试打印结果
/*connect函数可以接受两个参数，两个都是回调函数，第一个回调函数中接收store中的state，return state或一个对象，
意思是将store中的state映射到Number2组件的props中，第二个回调函数中接收store的dispatch，
返回一个对象，对象包含所需的action的dispatch函数*/
let Connected = connect(mapStateToProps, mapDispatchToProps)(Number2)

export default Connected;

点击++：

小结：其实主要就是利用react-redux的connect链接容器组件和UI组件，同时用了redux的bindActionCreators语法糖，从而省略掉了之前的actions.js文件，不再需要此文件了，因为react-redux封装了actions。