技術標籤：react

1，react-redux是作者為了方便使用redux封裝的庫，可用可不用，看個人的習慣。

2，react-redux的主要思想，是將元件拆分為容器元件和UI元件，容器元件主要用來狀態管理，進行store的計算，並對映到UI元件的props中；UI元件顧名思義就是隻呈現view，不進行store的操作，只負責接收狀態。

3，容器元件

3.1 connect 方法

connect方法是用於容器元件和UI元件的連線，將store對映到UI元件的props中。

import { connect } from 'react-redux';

const Account = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

export default Account;
 

Counter是UI元件，當然，connect方法中還有兩個引數，是react-redux的關鍵。

3.2mapStateToProps()

mapStateToProps()是一個函式，用來對映state到props

function mapStateToProps(state, ownProps) {
  return {
    value: state.account
  }
}

如此一來，UI元件中的props中就會有value欄位

props:{
  value: 0
}

3.3mapDispatchToProps()

mapDispatchToProps()也是一個函式，用來對映dispatch到props

function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(addTodo(1))
  }
}

UI元件中列印props

完整程式碼如下（功能是點選按鈕+1）

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import { addTodo, delTodo, asyncTodo } from '../../Redux/creatAction';

const Counter = (props) => {
  const { value, onIncreaseClick } = props;
  console.log('props：',props)
  return (
    <div>
      <h1>{value}</h1>
      <button onClick={onIncreaseClick}>+</button>
    </div>
  )
  
};

function mapStateToProps(state, props) {
  console.log('hahhha', props)
  return {
    value: state.account
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onIncreaseClick: () => dispatch(addTodo(1))
  }
}


const Account = connect(
  mapStateToProps,
  mapDispatchToProps
)(Counter)

export default Account;