How do you use dispatch in React components with state? - redux

Question

I'm using React + Redux and have a number of child components <IndividualValue/> that each load a value from an API when they mount. In addition they dispatch an action which accumulates the total of these values that is displayed in another component <TotalValues />. However you can't call dispatch inside componentDidMount.
I am able to achieve this using connect and mapDispatchToProps but what is the correct way to do this with Redux and Hooks?
Key parts of my code:
class IndividualValue extends React.Component {
constructor(props) {
super(props);
this.state = {value: 0}
const dispatch = useDispatch();
}
async componentDidMount() {
let value = axios.get(`api/{this.props.name}`).data.value;
this.setState({value: value})
dispatch(incrementTotalByValue(value)); // <--- ???
}
render() {
return (
<div>{this.props.name} = {this.state.value}</div>
)
}
}
function TotalValues() {
const total = useSelector((state) => state.counter.total)
return (
<div>
<div>
<span>{total}</span>
</div>
</div>
)
}
ReactDOM.render(
<Provider store={store}>
<IndividualValue name="nick" />
<IndividualValue name="oscar" />
<IndividualValue name="michael" />
<TotalValues />
</Provider>,
document.getElementById('root')
);

Answer 1

It seems that a way to achieve this is:
const [value, setValue] = useState(null);
const dispatch = useDispatch();
...
useEffect(() => {
(async () => {
let value = await axios.get(`api/{props.name}`).data.value;
setValue(value)
dispatch(incrementTotalByValue(value));
})();
}, [])
I don't know if that is the recommended way to do things with hooks. It appears useEffect can be used in a similar way to componentDidMount but there are differences and it's not a drop in replacement.

Answer 2

In Class Components, I usually do this:
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { Actions as NameActions } from "../../store/ducks/actionsHere";
class Main extends Component {
render() {
return <h1>Text</h1>
}
}
const mapStateToProps = (state) => ({
data: state.data,
});
const mapDispatchToProps = (dispatch) =>
bindActionCreators(NameActions, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(Main);