如何正确记忆 mapDispatchToProps？

Question

首先，这是我的 HOC：

export default function connectField({
         nameProp = 'name',
         valueProp = 'value',
         dispatchProp = 'dispatch'
     }: ConnectOptions) {

    return compose(
        getContext(contextTypes),
        connect((state, ownProps) => {
            const path = [namespace,...getPath(ownProps),...toPath(ownProps[nameProp])];
            const value = getOr('', path, state);
            return {
                [valueProp]: value
            };
        }, (dispatch,ownProps) => { // <----------- mapDispatchToProps
            const path = [...getPath(ownProps),...toPath(ownProps[nameProp])];

            return {
                [dispatchProp]: value => dispatch({type: ActionTypes.Change, payload: {path, value}})
            };

        }, (stateProps, dispatchProps, {[FIELD_PATH]: _, ...ownProps}) => {
            return {...stateProps, ...dispatchProps, ...ownProps}; 
        }, {
            areMergedPropsEqual: (a,b) => {
                let eq = shallowEqual(a,b);
                console.log('areMergedPropsEqual',a,b,eq);
                return eq;
            },
        }),
        withContext(contextTypes, props => {
            return {[FIELD_PATH]: [...getPath(props), props[nameProp]]};
        }),
    );
}

中间是我的mapDispatchToProps。这导致 areMergedPropsEqual 每次都返回 false，因为它每次都在创建一个新的动作创建者。

我不知道如何记住这一点：

value => dispatch({type: ActionTypes.Change, payload: {path, value}})

这样我每次都返回相同的函数实例。

in the docs 有一些关于“每实例记忆”的注释，这是我想要的，但我无法完全确定我应该在这里做什么。

---

说清楚，我知道如何记忆一个函数。但是，我不想使用具有无限历史的大缓存。这是不必要的内存消耗。我只需要像how reselect does it 这样的缓存大小为1。问题是我不能直接在connectField 中创建“选择器”，因为这仍然会创建一个共享实例——即，所有“连接字段”将共享相同的缓存，并且它们会相互覆盖，否定益处。它必须是每个组件实例。 这是特定于 React-Redux 的 connect 方法。它有一个语法，因此您可以在正确的位置创建选择器，并且每个实例只会运行一次。我只是在破译 API 时遇到了麻烦——他们是否期望一个函数返回一个返回对象的函数？还是一个以 propnames 作为键、函数作为值的对象？该函数返回什么？即，文档并不清楚 mapDispatchToProps 选项接受的所有不同变体。

Answer 1

如果您已经拥有lodash，则您拥有memoize 函数，它允许将任何函数转换为记忆函数。这个记忆函数将计算给定参数的返回值，然后每次提供相同的参数时总是返回相同的返回值。

例如，您可以像这样使用它：

import { memoize } from 'lodash'

const makeChangeDispatcher = memoize( (dispatch, path) => 
     value => dispatch({type: ActionTypes.Change, payload: {path, value}})
)

...

    (dispatch,ownProps) => { // <----------- mapDispatchToProps
        const path = [...getPath(ownProps),...toPath(ownProps[nameProp])];

        return {
            [dispatchProp]: makeChangeDispatcher(dispatch, path)
        };

    }

...

您可以在lodash documentation of memoize查看更多信息