react-redux库中connect()方法与Provider组件的使用

1.Provider

下载并引入react-redux库

npm i react-redux

import {Provider} from "react-redux"

import actions from "../store/actions/counter1"

在根组件的最外层包裹Provider，以便于后面组件使用store中的状态

ReactDOM.render(
    <Provider store= {store}>
     <Counter1></Counter1><Counter2>
     <hr/>
    </Counter2></Provider>,
window.app);

2.利用connet方法将store中的state和actions映射到需要使用的组件

• 方法一

需要引入的库和方法

import { connect } from "react-redux";

import { bindActionCreators } from "redux";

映射状态

function mapStateToProps(state) {
    return { number: state.counter1.number };
}

or

let mapStateToProps = state => ({ number: state.counter1.number });

映射方法

function mapDispatchToProps(disptch) {
    return bindActionCreators(actions, disptch);
}

or

let mapDispatchToProps = disptch => bindActionCreators(actions, disptch);

最后使用connet方法将redux和react结合

export default connect(mapStateToProps,mapDispatchToProps)(Counter1);

• 方法二

需要引入的库和方法

import { connect } from "react-redux";

import actions from "../store/actions/counter2"

映射状态

function mapStateToProps(state) {
    return { number: state.counter2.number };
}

or

let mapStateToProps = state => ({ number: state.counter2.number });

映射方法

将actions直接放入connet后面的小括号，代码如下所示：

export default connect(mapStateToProps,actions)(Counter2);

3.使用映射过来的状态和方法

Counter1.js

class Counter1 extends Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>Counter1</h1>
        <p>{this.props.number}</p>
        <button onClick={() => {this.props.increment(1)}}>+</button>
        <button onClick={() => {this.props.decrement(2)}}>-</button>
      </div>
    );
  }
}

Counter2.js

class Counter2 extends Component {
  render() {
      console.log(this.props);
    return (
      <div>
        <h1>Counter2</h1>
        <p>{this.props.number}</p>
        <button onClick = {()=>{this.props.increment(2)}}>+</button>
        <button onClick = {()=>{this.props.increment(3)}}>-</button>
      </div>
    );
  }
}

另附

store/action-types

export const ADD1 = "ADD1";
export const SUB1 = "SUB1";

export const ADD2 = "ADD2";
export const SUB2 = "SUB2";

store/reducers/counter1.js

import * as types from "../action-types"
// action 此时里面包含了type和payload
export default function reducer(state={number:0},action){
   switch (action.type) {
       case types.ADD1:
           return { number: state.number + action.payload }
       case types.SUB1:
           return { number: state.number - action.payload }
       default:
           return state;
   }
}

store/reducers/counter2.js

import * as types from "../action-types"
// action 此时里面包含了type和payload
export default function reducer(state={number:0},action){
   switch (action.type) {
       case types.ADD2:
           return { number: state.number + action.payload }
       case types.SUB2:
           return { number: state.number - action.payload }
       default:
           return state;
   }
}

结果：