功能组件的 mapStateToProps答案

【问题标题】：mapStateToProps for functional component功能组件的 mapStateToProps
【发布时间】：2019-03-22 07:14:32
【问题描述】：

有没有类似mapStateToProps的函数让我们可以将Redux状态连接到React中的功能组件？

将 state 作为 props 从父组件传递是唯一的解决方案吗？

【问题讨论】：

您好，您也可以使用 recompose 库 github.com/acdlite/recompose
道具就是道具；您正在将 Redux 状态映射到组件道具。组件的性质不相关。

【解决方案1】：

您绝对可以将mapStateToProps 与功能组件一起使用，就像使用类组件一样。

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

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

export default connect(mapStateToProps)(MyComponent);

【讨论】：

只通过 props 和 mapStateToProps 传递数据有什么区别？。
没有功能上的区别。 mapStateToProps 让你可以访问 redux 商店来构建你的道具。
@Pratap props 和 mapStateToProps 的本质区别在于数据的来源。在 mapStateToProps 中，数据源是 redux 存储。在 props 中，数据源是父组件。当组件是一个独立的 UI/可重用组件时，当组件可以知道 redux store 和 props 时使用 mapStateToProps。

【解决方案2】：

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

【讨论】：

这太棒了.. useDispatch 和 useSelector
是的，但 useSelector 有时并不干净。就我而言，任何存储值的更改都是重新安装我的组件，而不仅仅是重新渲染。重新安装导致我的组件中的所有 useEffects 重新运行。我仍在寻找解决方案。 :(

【解决方案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;

【讨论】：

那么注销功能在哪里？
@JasonRice 我没有包含它，因为这将特定于您的实现。例如，我的注销按钮将触发 POST 到 /api/logout 并清除 redux 中的任何状态
还是很高兴看到一个简单的例子。可以直接复制/粘贴来试用的东西。

【解决方案4】：

你应该首先connect 组件到商店。

使用react-redux 包提供的connect HOC 进行连接。它采用的第一个参数是一个方法，在给定全局存储的情况下，该方法返回一个对象，其中仅包含您在此组件中需要的属性。

例如：

import { connect } from 'react-redux'

const HelloComponent = ({ name }) =>
    <p>{ name }</p>

export default connect(
    globalState => ({ name: globalState.nestedObject.innerProperty })
)(HelloComponent)

为了提高可读性，常用方法mapStateToProps，如下：

const mapStateToProps = state => ({
    name: state.nestedObject.innerProperty
})

export default connect(mapStateToProps)(HelloComponent)

【讨论】：

虽然我看不出这如何改进已经投票的答案，但重构为 mapStateToProps 包含一个应该修复的错误。虽然我看不出有任何理由从本质上复制现有答案。
由于答案的类型，我假设（可能是错误的）@sumit 错过了 react 和 redux 之间的一些基础知识。由于这个假设，我试图给出更多的解释。

【解决方案5】：

     const CategoryList = (props) => {
    
      return (
           <div>
               <h3>Category</h3>
               <h5>Seçili Kategori:{props.currentCategory.categoryName}</h5>
           </div>
      );
   }

    function mapStateToProps(state) {
    
        return {
            currentCategory: state.changeCategoryReducer
        }
    }
    
    export default connect(mapStateToProps)(CategoryList);

【讨论】：