我们可以在 React.js 的无状态组件中访问 redux [关闭]答案

【问题标题】：Can we access redux in stateless component in React.js [closed]我们可以在 React.js 的无状态组件中访问 redux [关闭]
【发布时间】：2020-06-25 05:30:33
【问题描述】：

我想在无状态组件中访问 redux。怎么做。请举例说明！

【问题讨论】：

你有没有花时间在react-redux docs上？请显示一个尝试。 How to ask
伙计！正如@DrewReese 所说，请通读文档！ . read-redux-docs 中有例子
也想澄清一下（如果重要的话）。当您说“无状态组件”时，对您来说，您是指没有状态的基于类的组件还是功能组件（也没有状态），或者两者都有？有些解决方案适用于两者（即connect HOC），有些仅适用于功能组件（即选择器和调度挂钩）。

标签： javascript reactjs react-redux redux-thunk

【解决方案1】：

使用 react-redux 钩子的详细文档。 https://react-redux.js.org/api/hooks

这是使用 useSelector 和 useDispatch 挂钩的示例代码。

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

export const Component = () => {
  const value = useSelector(state => state.value);
  const dispatch = useDispatch();

  return (
    <div
      onClick={() => dispatch({ type: "GET_VALUE", payload: {} })}
    >{`Value is ${value}`}</div>
  );
};

【讨论】：

在较大的项目中（项目大到可以使用 redux）const value = useSelector(state => state.value); 是不好的做法，最好使用选择器功能。最好重新选择。 Here 是一些关于如何做到这一点的文档。他们确实提到记忆化是这样做的动力，但我认为代码重用和防止重复实现将是使用组合选择器函数的更大动力。
@HMR 有效点，但技术上 是一个选择器函数，尽管它可能不是一个非常高效的函数（即没有结果记忆）。
@DrewReese 像myVal = useSelector(state=>state.value) 这样的语句的问题在于它假定知道value 的状态（state.value）并假定state.value 是它需要的@ 类型987654331@。如果您有许多容器获得这样的状态，那么当重构更改状态的形状或类型时，事情就会变得复杂。像myVal = useSelector(selectMyVal) 这样的语句将获取myVal 的实现委托给一个函数，即使许多容器获取myVal，重构也只会影响selectMyVal 函数。
@HMR 它仍然是一个函数，不管它是在哪里定义的，这就是重点。没有什么能阻止将state => state.value 分解为实用程序选择器功能，例如export const selectMyVal = state => state.value; 以实现重用和可维护性。也许您最初的评论更多地是关于匿名内联定义是不好的做法，因为在一堆组件中重复 that 不是很 DRY。状态选择器函数至少是 any 函数，它采用 整个状态对象 并返回 一个值。
Perhaps your original comment was more about the anonymous inline definition being bad practice 是的，这就是我的意思。许多文档使用useSelector(sate=>implementation)，甚至在connect(mapStateToProps) 等同一文件中定义选择器，其中mapStateToProps 不是从选择器导入的。我在几个项目中多次遇到这个问题，并且建议不要这样做，或者至少在记录时要小心。在我最初的评论中，我应该说“最好使用 imported 选择器函数”

【解决方案2】：

是的。组件是否无状态并不重要。 Redux 可以在两者上以相同的方式使用，使用 react-redux 提供的 connect 方法，它将 Redux 托管状态的选定部分作为道具传递到您的组件中：

import { connect } from 'react-redux'

const mapStateToProps = state => {asProp: state.someField}

function StatelessComponent({asProp}) {
  return <></>
}

export default connect(mapStateToProps)(StatelessComponent)

【讨论】：