Redux connect 优化 mergeProps [英] Redux connect optimize mergeProps

问题描述

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

items.map(item => (<列表项项目={项目}更新={更新[item.id]}{/** 其他道具如删除加载*/}/>));

<块引用>

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

我的项目容器有一个 优化的 mapStateToProps(它返回一个函数，而不是对象):

const mapDispatchToProps = {更新项，//其他}const mapStateToProps = () =>{//创建momoized状态创建者const memoizedStateCreator = createMemoized();return (unused, { item, updates }) =>//使用记忆状态创建器memoizedStateCreator(项目，更新)；};

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

我想把它改成

为此我可以使用 mergeProps 但这会导致 Item(Item 函数)的渲染被调用，即使没有任何改变，因为我总是返回一个新的引用作为 props.它也会导致对结果进行 shadow DOM 比较(而不是会跳过那个的纯组件)

MergeProps 不能使用 工厂函数(如 mapStateToProps) 在这里我可以创建一个记忆功能.

const mergeProps = (stateProps, dispatchProps) =>({...状态道具，...调度道具，更新项目:() =>stateProps.updateItem(stateProps.item),});

一种方法是根本不使用mergeProps，而是使用包装函数:

const wrapper = props =>项目清单({...道具，更新项目:() =>props.updateItem(props.item),});导出默认连接(mapStateToProps，mapDispatchToProps)(备忘录(包装器));

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

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

解决方案

假设 requestDelete 是一个可以被调度的动作，你应该将它映射到你连接的 mapDispatchToPropsListItem 组件.mapDispatchToProps 也可以是一个接收 ownProps 作为具有 id 的第二个参数的函数:

const mapDispatchToProps = (dispatch, {item}}) =>({requestDelete: () =>调度(请求删除(item.id))，});导出默认连接(mapStateToProps，mapDispatchToProps)(ListItem)；

I have a list of items that is rendered by the list like so:

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

Note that item here is not what is passed to the action creator functions, ListItem is a container that will change this.

My item container has an optimized mapStateToProps (it returns a function, not an object):

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

In the item when I click to save the item I have something like this:

<button onclick={updateItem(item)}

I would like to change this to

<button onclick={updateItem}

For that I can use mergeProps but that would cause render of the Item (the Item function) to be called even though nothing changed because I always return a new reference as props. It would also cause react to do a shadow DOM compare of the result (instead of pure component that would skip that)

MergeProps cannot be optimized with a factory function (like mapStateToProps) where I can create a memoized function.

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

One way to do this is to not use mergeProps at all and use a wrapper function instead:

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

My question is; is there a way to do this with mergeProps without having to turn my functional components into classes?

Returning a function from mapDispatchToProps would not work in my case because item does not come from ownProps, it comes from mapStateToProps

解决方案

Assuming that requestDelete is an action that can be dispatched you should map it in mapDispatchToProps of your connected ListItem component. mapDispatchToProps can also be a function that receives the ownProps as the second argument which has the id:

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

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

这篇关于Redux connect 优化 mergeProps的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！