javascript - React hooks、函数组件和 Redux

Question

React hooks 使得无需类声明(仅函数组件)即可使用所有 React 功能，例如组件状态和生命周期方法。这减少了样板文件、重复并协商了容易出现错误的 this 关键字的使用。此外，由于函数组合，它可以轻松地在不相关的组件之间隔离和共享公共(public)状态管理逻辑。

但是，hooks 并没有取代 Redux，因为它是集中式且可预测的状态容器。是否可以将 React 函数组件连接到 Redux，因为我想拥抱 future React 的仅函数范式并仍然使用 Redux？

Answer 1

回答您的问题:

Is it possible to connect React function components to 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 文档 intself 中看到:

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