React钩子，功能组件和Redux

Question

React hooks makes it possible to use all React features such as component state and lifecycle methods without class declarations (just function components). This reduces boilerplate, duplication and negotiates the use of bug-prone this keyword. Further it makes it easy to isolate and share common state-management logic across unrelated components, thanks to function composition.

However, hooks doesn't replace Redux by it's purpose of centralized and predictable state container. Is it possible to connect React function components to Redux, as I want to embrace the functions only paradigm of future React and still use Redux?

Answer 1

You can use the useSelector and useDispatch hooks introduced in react-redux v7.1 as a stable release. Here's the link: https://react-redux.js.org/next/api/hooks

Answer 2

To answer your question:

Is it possible to connect React function components to Redux?

yes, it is possible , there is no difference. Simple example:

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

Actually, you can see that in the Redux documentation intself:

• functional component definition - https://redux.js.org/basics/example#components-todolistjs
• container - https://redux.js.org/basics/example#containers-visibletodolistjs