javascript - redux 形式的多重标准化器

Question

我想为 normalizing redux fields 传递多个函数，有办法吗？就像我们在验证 Prop 中传递一个数组一样？

validate={[alphanumeric,maxlength]}

在整个 redux 形式的问题中，我看到了类似的方式

normalize={maxlength_alphanumeric(5)} //but here two logic are burried in one function

如何实现类似的东西

normalize={maxlength(5) , alphanumeric}

Answer 1

我们可以使用闭包来实现这一点，因此我们创建了一个接受规范化函数数组的函数。

请注意，这与验证不同，因为在验证中，所有函数都不相关，如果其中一个函数失败，则表示验证失败。

虽然在规范化中，传递给每个规范化函数的值需要从已经进行了一些规范化的先前函数传递。

所以我们可以使用下面的normalizeAll函数来做到这一点

function normalizeAll(normalizers){
    return function(value , previousValue , allValues , previousAllValues){ //note that these arguments are passed by default from redux form
        var i = 0;
        var normalizersLength = normalizers.length;
        var currentValue = value;
        while(i < normalizersLength)
        {
            var currentNormalizer = normalizers[i];
            if(typeof currentNormalizer == "function")
            {
                currentValue = currentNormalizer(currentValue ,previousValue , allValues , previousAllValues);
            }
            i++;
        }

        return currentValue;
    }
}

//I am using only the `value` argument in normalization functions just for the example, but you can use the rest of them if they are needed
var firstNormalization = function(value , previousValue , allValues , previousAllValues){
    return value+1;
}

var secondNormalization = function(value, previousValue , allValues , previousAllValues){
    return value+2;
}

var thirdNormalization = function(value, previousValue , allValues , previousAllValues){
    return value+3;
}

//To test result: i will execute the function returned from normalizeAll and pass the first argument as 1.
var normalizedValue = normalizeAll([firstNormalization , secondNormalization , thirdNormalization])(1); 
console.log(normalizedValue); // 7 

现在要在你的 redux 表单中使用 normalizeAll，你需要做这样的事情

normalize={normalizeAll([firstNormalizationFunction , secondNormalizationFunction])}

注意这是假设所有规范化函数都是同步的，我不认为我们通常有规范化函数需要异步的用例，但解决方案仍然是相同的但是然后我们将使用 callback 函数或 promise