每次要访问 redux 中的 state 时，是否必须声明 mapDispatchToProps 和 mapStateToProps？

Question

我只是在使用 redux 并且我有一个问题是每次我想访问 redux state 时是否必须声明 mapState 和 mapDispatch

我已经设置了 redux 及其商店和动作/动作创建者/类型。 我还使用了 react-redux 库中的 connect HOC function。 我有两个组件，都共享 state 和操作。 每次我想访问这些属性时，我是否必须传递 mapDispatchToProps 和 mapStateToProps 并连接 function ？ 我知道有 redux-hooks 可以做到这一点，但我要求没有钩子。 我将在下面提供代码。 谢谢！

// CarContainer

import React from "react";
import { connect } from "react-redux";
import {BUY_CAR, SELL_CAR} from "./carActions";

const buyCar=()=> {
    return {
        type: BUY_CAR
    }
}

const sellCar =()=> {
    return {
        type: SELL_CAR
    }
}

const CarContainer = (props) => {
    return (
        <div>
            <h5>Number of Cars: {props.numOfCars}</h5>
            <button onClick={props.buyCar}>Buy Car</button>
            <button onClick={props.sellCar}>Sell Car</button>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        numOfCars: state.numOfCars
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        buyCar: ()=> dispatch(buyCar()),
        sellCar: ()=> dispatch(sellCar())
    }
}

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




// LoseCar container


import React from "react";
import { connect } from "react-redux";
import { SELL_CAR } from "./carActions";

const sellCar =()=> {
    return {
        type: SELL_CAR
    }
}

const LoseCar = (props) => {
    return (
        <div>
            <h5>Number of Cars: {props.numOfCars}</h5>
            <button onClick={props.sellCar}>Sell Car</button>
        </div>
    )
}


const mapStateToProps = (state) => {
    return {
        numOfCars: state.numOfCars
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        sellCar: ()=> dispatch(sellCar())
    }
}

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



// App Container


import React from 'react';
import CarContainer from "./redux/cars/CarContainer";
import LoseCar from "./redux/cars/LoseCar"
import './App.css';

function App() {
  return (
    <div className="App">
      <CarContainer />
      <LoseCar/>
    </div>
  );
}

export default App;

Answer 1

您可以在一个文件中创建一个连接器，这样您就不必多次编写相同的逻辑。

export const connectCars = connect(mapStateToProps,mapDispatchToProps);

然后在另一个文件中，您可以只使用

export default connectCars(LoseCar);

Answer 2

我不知道我是否正确，但根据React Redux Doc ：

1- mapStateToProps ：用于从存储中选择连接组件需要的部分数据。 这样，如果您想将商店的某些部分用作将自行更新的只读变量，您可以为 mapStateToProps 使用mapStateToProps 。

2- mapDispatchToProps ：用于将操作分派到商店。 因此，如果您想更改商店中的任何值，您可以将 go 更改为mapDispatchToProps 。

如果您不与组件内的商店进行交互，则不需要使用它们。 此外，您只能拥有其中之一。 像那样：

如果您不需要读取任何值：

export default connect(null, mapDispatchToProps)(CarContainer);

或者

如果您不需要更改任何值：

export default connect(mapStateToProps, null)(CarContainer);