mapStateToProps用于功能组件

Question

是否有任何类似的函数mapStateToProps可以将Redux状态连接到React中的功能组件？

从父组件传递状态作为道具唯一的解决方案？

Answer 1

您可以使用mapStateToProps功能组件,就像使用类组件一样.

function MyComponent({ propOne }) {
  return <p>{propOne}</p>
}

function mapStateToProps(state) {
  return { propOne: state.propOne };
} 

export default connect(mapStateToProps)(MyComponent);

Answer 2

react-redux 现在有一个 useSelector 方法。对于使用钩子的功能组件来说，这是一种更简洁的方法。请参阅：https : //react-redux.js.org/next/api/hooks#useselector

Answer 3

使用 Hooks 你可以使用这样的东西

import React from 'react';
import {useDispatch, useSelector} from "react-redux";

const AccountDetails = () => {

    const accountDetails = useSelector(state => state.accountDetails);
    const dispatch = useDispatch();

    return (
        <div>
            <h2>Your user name is: {accountDetails.username}</h2>
            <button onclick={() => dispatch(logout())}>Logout</button>
        </div>
    );
};


export default AccountDetails;