Question

我是 React 和 Redux 的新手，我使用的许多指南都有几年的历史了。 React 和 Redux 中的 Hooks 似乎都比较新，我看到的一般建议是用函数式组件和 useState() 替换 React 中的类组件。

在进行 Redux 练习时，我不清楚的是 mapStateToProps()、mapDispatchToProps() 和 connect() 是否仍然相关，或者我现在是否可以将其替换为 {{1 }} 和 useSelector() 钩子。

目前，通过 useDispatch() 和 mapStateToProps() 设置，我有一个父组件通过多个级别将我的 Redux 存储状态发送给多个子组件。每当我将一个新的状态变量添加到我的存储中时，这涉及在所有这些组件中钻取新状态，由于我使用的是 Typescript 并且必须更新我的所有 mapDispatchToProps() 类型，因此变得更加麻烦。

一种选择是将每个子组件直接 ownProps 到商店。对于我实际使用状态变量的每个子组件，我可以改为使用 connect() 和 useSelector() 吗？这有什么缺点？

谢谢！

Answer 1

是的。使用 useSelector 和 useDispatch 您可以完全消除 Container 其目的是将状态和操作映射到您的子组件中。您只需要将状态分配给组件内部的变量并将操作分派给 redux，例如就像这个例子：

export default function AccountScreen(props) {
   const user = useSelector(state => state.account);

    const handleSubmit = () => {
        dispatch(updateProfile(user._id, firstName, lastName, alergies, dob, medicalCondition));
        props.navigation.navigate('HomeTab');
    }

Answer 2

是的，根据另一个答案，React-Redux hooks API 替换了现有的 connect API，我们特别建议使用 hooks API 作为默认值：

部分原因是我们建议将 TypeScript 与 Redux 一起使用，并且与 TS 一起使用 hooks API 很多比 connect 更简单：

https://react-redux.js.org/using-react-redux/static-typing#typing-the-useselector-hook

useSelector() 和 useDispatch() 会代替 mapStateToProps() 和 mapDispatchToProps() 吗？

2 个答案: