Redux 连接优化 mergeProps

Question

我有一个由列表呈现的项目列表，如下所示：

items.map(item => (
  <ListItem
    item={item}
    updates={updates[item.id]}
    {/** other props like deleting loading*/}
  />
));

请注意，这里的 item 不是传递给动作创建者的内容 函数，ListItem 是一个容器，它将改变这一点。

我的项目容器有一个optimized mapStateToProps（它返回一个函数，而不是一个对象）：

const mapDispatchToProps = {
  updateItem,
  //others
}
const mapStateToProps = () => {
  //create momoized state creator
  const memoizedStateCreator = createMemoized();
  return (unused, { item, updates }) =>
    //use memoized state creator
    memoizedStateCreator(item, updates);
};

在我点击保存项目时，我有这样的东西：

<button onclick={updateItem(item)}

我想把这个改成

<button onclick={updateItem}

为此，我可以使用mergeProps，但这会导致调用 Item（Item 函数）的渲染，即使没有任何更改，因为我总是返回一个新的引用作为 props。它还会导致 react 对结果进行影子 DOM 比较（而不是会跳过的纯组件）

MergeProps 无法使用 factory function（如 mapStateToProps）进行优化，我可以在其中创建记忆函数。

const mergeProps = (stateProps, dispatchProps) => ({
  ...stateProps,
  ...dispatchProps,
  updateItem: () => 
    stateProps.updateItem(stateProps.item),
});

做到这一点的一种方法是根本不使用mergeProps，而是使用包装函数：

const wrapper = props =>
  ListItem({
    ...props,
    updateItem: () => props.updateItem(props.item),
  });
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(memo(wrapper));

我的问题是；有没有办法用 mergeProps 做到这一点，而不必将我的功能组件变成类？

从 mapDispatchToProps 返回一个函数在我的情况下不起作用，因为 item 不是来自 ownProps，它来自 mapStateToProps

Answer 1

假设requestDelete 是一个可以调度的动作，您应该将它映射到您连接的ListItem 组件的mapDispatchToProps 中。 mapDispatchToProps 也可以是一个函数，它接收ownProps 作为第二个参数，它具有id：

const mapDispatchToProps = (dispatch, {item}}) => ({
    requestDelete: () => dispatch(requestDelete(item.id)),
});

export default connect(mapStateToProps, mapDispatchToProps)(ListItem);