你如何在有状态的 React 组件中使用调度？

Question

我正在使用 React + Redux，并且有许多子组件 <IndividualValue/>，每个子组件在挂载时都从 API 加载一个值。此外，他们还派发了一个动作，该动作累积了显示在另一个组件 <TotalValues /> 中的这些值的总和。但是你不能在 componentDidMount.

中调用 dispatch

我可以使用 connect 和 mapDispatchToProps 实现此目的，但是 使用 Redux 和 Hooks 的正确方法是什么？

我的代码的关键部分：

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

看来实现这个的方法是：

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));
      })();
}, [])

我不知道这是否是使用钩子做事的推荐方式。看起来 useEffect 可以与 componentDidMount 类似的方式使用，但存在差异并且不是替代品的下降。

Answer 2

在Class组件中，我通常这样做：

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);

你如何在有状态的 React 组件中使用调度？

How do you use dispatch in React components with state?

redux

react-redux