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

【问题标题】：Do you have to declare mapDispatchToProps and mapStateToProps everytime you want to access the state in redux?每次要访问redux中的状态时，是否必须声明mapDispatchToProps和mapStateToProps？
【发布时间】：2020-06-05 19:32:45
【问题描述】：

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

我已经设置了 redux 及其商店，以及动作/动作创建者/类型。我还使用了 react-redux 库中的 connect HOC 函数。我有两个组件，都共享状态和动作。每次我想访问这些属性时，是否也必须传递 mapDispatchToProps 和 mapStateToProps 和 connect 函数？我知道有 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;

【问题讨论】：

您可以使用重新选择来防止重复代码，重复实现您所在状态的位置信息，并假设它的形状对于大型应用程序来说是非常糟糕的设计。 mapDispatch 可以更简单，你可以只传递一个对象：const container = connect(selectProps, {buyCar, sellCar}); const ConnectedCarContainer = container(CarContainer); const LoseCarContainer = container(LoseCar)

标签： javascript reactjs redux react-redux state

【解决方案1】：

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

export const connectCars = connect(mapStateToProps,mapDispatchToProps);

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

export default connectCars(LoseCar);

【讨论】：

【解决方案2】：

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

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

2-mapDispatchToProps: 用于将操作分派到商店。因此，如果您想更改商店内的任何值，请选择 mapDispatchToProps。

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

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

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

或

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

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

【讨论】：