从 redux、aggrid 和 react 钩子重新选择/连接的组合

Posted 2023-03-28

【中文标题】从 redux、aggrid 和 react 钩子重新选择/连接的组合

【英文标题】：Combination of reselect/connect from redux, aggrid and react hooks

【发布时间】：2021-03-01 19:29:15

【问题描述】：

我正在将一个旧的 React 组件重构为 React Hooks。一切正常，除了随机工作的选择器 id。有时，即使我知道状态是有效的，选择器中的“状态”只是默认状态。似乎它是从无法达到连接状态的上下文中执行的，因此 Ag Grid 开始抱怨 id 不能未定义。

import get from "lodash"
import  createSelector,createStructuredSelector  from "reselect"

const someotherselector = createSelector(...)
const idSelector = (state:State) => (row:any) => get(row, someotherselector(state)

const mapStateToProps = createStructuredSelector(
getId: idSelector 
)

const WrappedComponent = connect(mapStateToProps,)(Component)

const Component = props => 
// some stuff
// some hooks

  return <AgGrid getRowNodeId=props.getId/>

现在，如果我用相同的函数覆盖 getRowNodeId 的类再创建一个层，它工作得非常好。示例：

const WrappedComponent = connect(mapStateToProps,)(Component1)

class Component1 extends React.Component

  render()
  
    return <Component ...this.props getRowNodeId=this.props.getRowNodeId/>
  


const Component = props => 
// some stuff
// some hooks

  return <AgGrid getRowNodeId=props.getId/>

如果它适用于类组件，那么我认为它与正在调用的方法的上下文有关，它似乎没有使用最新版本的状态。我在这里做的是根本错误的事情吗？

编辑：进一步观察后，AgGrid 似乎从未更新getRowNodeId 处理程序，即使在组件中传递了新版本（它是不同的函数引用），仍然使用收到的第一个处理程序。知道为什么它在第一个示例中没有被选中，而是在第二个示例中被选中吗？

【参考方案1】：

AgGrid 似乎没有重新分配 getRowNodeIdhandler 所以我在这里看到的唯一解决方案是设置

const getRowNodeIdHandler = useRef(null);
getRowNodeIdHandler.current = getRowNodeId;

然后继续使用getRowNodeIdHandler。我不知道为什么它可以与类组件一起使用。