Back To Articles

React Redux with Class-based Components

🧑🏻‍💻 海豹人 Sealman 📅 March 4, 2022

#react #redux
Article Image

本文介紹 React Redux 於 Class-based Components 的使用。

The Connect Function

這個 connect() 是一個 HOC，會接收一個元件。

它的寫法可以解讀為 connect() 會回傳一個 Function，接著把 Counter 元件作為參數傳進去。

export default connect()(Counter);

除了接收元件，connect() 本身也會接受兩個 Function 作為參數：

  • 第一個參數是將 Redux State map to Props，做的事情其實就跟 useSelector 一樣
  • 第二個參數則類似 useDispatch，作用是將 dispatch 函式儲存為 Props
import { Component } from "react";
import { connect } from "react-redux";

class Counter extends Component {
  incrementHandler = () => {
    this.props.increment();
  };

  decrementHandler = () => {
    this.props.decrement();
  };

  render() {
    return (
      <main>
        <div>{this.props.counter}</div>
        <div>
          <button onClick={this.incrementHandler.bind(this)}>Increment</button>
          <button onClick={this.decrementHandler.bind(this)}>Decrement</button>
        </div>
      </main>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: "INCREMENT" }),
    decrement: () => dispatch({ type: "DECREMENT" }),
  };
};

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

References