Javascript 我们可以在React.js的无状态组件中访问redux吗

我想访问无状态组件中的redux。如何做到这一点。请举例说明

使用

react redux

钩子的详细文档

下面是使用

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

从“React”导入React；
从“react-redux”导入{useSelector，useDispatch}；
导出常量组件=（）=>{
const value=useSelector（state=>state.value）；
const dispatch=usedpatch（）；
返回(
分派（{type:“GET_VALUE”，有效负载：{}}）
>{`Value是${Value}`}
);
};

是。组件是否是无状态的并不重要。使用提供的

connect

方法，可以以相同的方式在这两个组件上使用Redux，该方法将Redux管理状态的选定部分作为道具传递到组件中：

从'react redux'导入{connect}
const mapStateToProps=state=>{asProp:state.someField}
函数无状态组件（{asProp}）{
返回
}
导出默认连接（MapStateTops）（无状态组件）

您有没有花时间与？请尝试一下。伙计！正如@DrewReese所说的，请仔细阅读这些文档。有一个例子，我们也想澄清一下（如果有关系的话）。当你说“无状态组件”时，你指的是没有状态的基于类的组件还是功能组件（也没有状态），或者两者都有？一些解决方案既适用于连接（即

connect

HOC），也适用于功能组件（即选择器和分派挂钩）。在较大的项目中（大到可以使用redux的项目）

const value=useSelector（state=>state.value）是坏习惯，它；最好使用选择器函数。最好重新选择。这是一些关于如何做的文档。他们确实提到记忆是这样做的动机，但我认为代码重用和防止重复实现将是使用组合的选择器函数的更大动机。@HMR有效点，但从技术上讲，这是一个选择器函数，尽管可能不是一个非常高性能的函数（即没有结果记忆）@drewrese类似于
myVal=useSelector（state=>state.value）
的语句的问题在于，它假定知道
value
在状态（state.value）中的位置，并假定
state.value
是它需要的
myVal
类型。如果您有许多容器获得这样的状态，那么当重构更改状态的形状或类型时，会使事情变得复杂。类似于
myVal=useSelector（selectMyVal）
的语句将获取
myVal
的实现委托给一个函数，即使许多容器获取
myVal
，重构也只会影响
selectMyVal
函数。@HMR尽管它仍然是一个函数，不管它定义在哪里，这就是重点。没有什么能阻止一个人将
state=>state.value
分解为实用工具选择器函数，比如
export const selectMyVal=state=>state.value用于重复使用和可维护性。也许您最初的评论更多的是关于匿名内联定义是一种不好的做法，因为在一堆组件中重复这一点并不是很枯燥。最起码，状态选择器函数是任何获取整个状态对象并返回值的函数。
也许您最初的评论更多地是关于匿名内联定义是错误的做法
是的，这就是我的意思。许多文档使用
useSelector（sate=>implementation）
甚至在同一文件中定义选择器，如
connect（mapstateTrops）
其中
mapstateTrops
不是从选择器导入的。我在几个项目中多次遇到这个问题，我建议不要这样做，或者至少在记录这个问题时要小心。在我最初的评论中，我应该说“最好使用导入的选择器函数”