redux形式的多个规范化器

时间:2017-11-30 06:46:58

标签: javascript reactjs react-native redux-form redux-form-validators

我想为normalizing redux fields传递多个函数,有没有办法这样做?就像我们在验证道具中传递数组一样?

validate={[alphanumeric,maxlength]}
在整个redux-forms问题中,我看到了像

这样的方法
normalize={maxlength_alphanumeric(5)} //but here two logic are burried in one function

如何实现

之类的东西
normalize={maxlength(5) , alphanumeric}

1 个答案:

答案 0 :(得分:2)

我们可以使用闭包实现它,因此我们创建一个接受规范化函数数组的函数。

请注意,这与验证不同,因为在验证过程中,如果其中一个函数失败,则所有函数都不相关,这意味着验证失败。

在规范化过程中,传递给每个规范化函数的值需要从已经进行了一些规范化的前一个函数传递。

所以我们可以使用下面的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