React钩子，功能组件和Redux

Question

React钩子可以使用所有React功能，例如组件状态和生命周期方法，而无需类声明（仅是函数组件）。 这样可以减少重复样板，减少重复并协商易于使用this关键字的bug。 此外，由于功能组合，它使得在不相关的组件之间隔离和共享通用状态管理逻辑变得容易。

但是，钩子并不能代替Redux来达到集中和可预测状态容器的目的。 是否可以将React函数组件连接到Redux，因为我只想接受未来React的函数范式而仍然使用Redux？

Answer 1

您可以使用react-redux v7.1中引入的useSelector和useDispatch挂钩作为稳定版本。 这是链接： 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