如何正确回忆录mapDispatchToProps？

Question

首先，这里是我的专题：

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

这样我每次都会得到相同的函数实例。

有一些关于“每个实例回忆录”的笔记，这是我想要的，但我不能完全理解我在这里应该做的事情。

要说清楚，我知道如何回忆录一个函数。但是，我不希望使用具有无限历史的大缓存。这是不必要的内存消耗。我只需要1的缓存大小，就像如何重新选择？一样。问题是我不能直接在connectField内部创建“选择器”，因为它仍然创建一个共享实例--也就是说，所有“连接字段”都将共享相同的缓存，它们将覆盖彼此，从而抵消好处。它必须是每个组件实例。这是特定于React Redux的connect方法。它有一个语法，这样您就可以在正确的位置创建选择器，并且每个实例只能运行它一次。我只是很难破解API --他们期望一个函数返回一个返回对象的函数吗？还是以名字作为键和函数作为值的对象？这个函数会返回什么？也就是说，docs不清楚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)
        };

    }

...

您可以在回忆录文件上看到更多的信息