Do you have to declare mapDispatchToProps and mapStateToProps everytime you want to access the state in redux?

Question

I am just using redux and I have a question about whether I have to declare mapState and mapDispatch every time I want to access to the redux state

I have set up redux with its store, and actions/action creators/types. I also utilized the connect HOC function from the react-redux library. I have two components, both sharing the state and actions. Do I have to pass the mapDispatchToProps and mapStateToProps and connect function as well everytime I want to access these properties? I know there is redux-hooks that can do this, but I am asking for without the hooks. I will provide code below. Thanks!

// 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

You could create a connector in one file so you don't have to write the same logic multiple times.

export const connectCars = connect(mapStateToProps,mapDispatchToProps);

Then in another file, you can use just

export default connectCars(LoseCar);

Answer 2

I don't know if i get it right, but according to React Redux Doc :

1- mapStateToProps : is used for selecting the part of the data from the store that the connected component needs. That way, if you want to use some part of your store as a read-only variable that will be updated by itself, you go for mapStateToProps .

2- mapDispatchToProps : is used for dispatching actions to the store. So if you want to change any value inside your store you go for mapDispatchToProps .

You don't need to use none of them if you will not interact with your store inside the Component. Also, you can have only one of those. Like that:

if you don't need to read any value:

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

or

if you dont need to change any value:

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