Question

React挂钩使无需类声明（仅函数组件）即可使用所有React功能，例如组件状态和生命周期方法。这样可以减少样板，重复并协商易于产生错误的this关键字的使用。此外，借助功能组合，它可以轻松地在不相关的组件之间隔离和共享通用状态管理逻辑。

但是，钩子并不能代替Redux来实现集中和可预测的状态容器。是否可以将React函数组件连接到Redux，因为我只希望包含未来React的函数范式，并且仍然使用Redux？

Answer 1

您可以使用useSelector v7.1中引入的useDispatch和react-redux挂钩作为稳定版本。这是链接：https://react-redux.js.org/next/api/hooks

Answer 2

回答您的问题：

是否可以将React函数组件连接到Redux？

是的，有可能，没有区别。简单的例子：

import { useState } from "react";
import { connect } from "react-redux";

const Foo = ({ bar, handleOnClick }) => {
  const [foo, setFoo] = useState(true);

  return (
    <div onClick={handleOnClick}>
      {foo}
      <div>{bar}</div>
    </div>
  );
};

const mapStateToProps = state => ({
  bar: state.bar
});

const mapDispatchToProps = dispatch => ({
  handleOnClick() {
    dispatch({ type: "foo" });
  }
});

export const FooContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(Foo);

实际上，您可以在Redux文档中看到这一点：

功能组件定义-https://redux.js.org/basics/example#components-todolistjs
容器-https://redux.js.org/basics/example#containers-visibletodolistjs

React钩子，功能组件和Redux

2 个答案: