What is connect()() function in redux or reactjs ?

In redux, we usually comes across connect()() syntax.

Everyone knows that, connect()() function in redux is used for connecting the component with store.

But under the hood, what it exactly means? What can we call such functions ? Is this are normal …


This content originally appeared on DEV Community and was authored by DEV Community

In redux, we usually comes across connect()() syntax.

Everyone knows that, connect()() function in redux is used for connecting the component with store.

But under the hood, what it exactly means? What can we call such functions ? Is this are normal function like foo() thing ?

Lets see whats its exactly:

What it is knowns as ?
Currying: This methodology or syntax signature of function which takes multiple arguments one at a time is known as 'Curried function' or in short 'Currying'

Is it same as normal / partial function foo()?
Curry: lets you call a function, splitting it in multiple calls, providing one argument per-call.

Partial: lets you call a function, splitting it in multiple calls, providing multiple arguments per-call.

Basically both are same, Currying function helps you to manage code better than partial function and that's the reason on architecture level, usually you will come across curry functions.

Example: Lets do a sum using both partial and curry function:

Partial function:

function sum_partial(a,b,c){
    return a+b+c;
}

Curried Function:

function sum_curried(a) {
    return function (b) {
        return function (c)  {
            return a + b + c
        }
    }
}

Calling partial function:

let res = sum_partial(1, 2, 3);
console.log(res); //6

Calling Curried function:

//Method ONE
let sc1 = sum_curried(1);
let sc2 = sc1(2);
let res2 = sc2(3);
console.log(res2); //6

Short METHOD OR Similar to connect()() in redux

let res3 = sum_curried(1)(2)(3);
console.log(res3); //6

Working JS Fiddle here

For more such contents follow @msabir

Cheers!!


This content originally appeared on DEV Community and was authored by DEV Community


Print Share Comment Cite Upload Translate Updates
APA

DEV Community | Sciencx (2022-03-01T06:19:48+00:00) What is connect()() function in redux or reactjs ?. Retrieved from https://www.scien.cx/2022/03/01/what-is-connect-function-in-redux-or-reactjs/

MLA
" » What is connect()() function in redux or reactjs ?." DEV Community | Sciencx - Tuesday March 1, 2022, https://www.scien.cx/2022/03/01/what-is-connect-function-in-redux-or-reactjs/
HARVARD
DEV Community | Sciencx Tuesday March 1, 2022 » What is connect()() function in redux or reactjs ?., viewed ,<https://www.scien.cx/2022/03/01/what-is-connect-function-in-redux-or-reactjs/>
VANCOUVER
DEV Community | Sciencx - » What is connect()() function in redux or reactjs ?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/03/01/what-is-connect-function-in-redux-or-reactjs/
CHICAGO
" » What is connect()() function in redux or reactjs ?." DEV Community | Sciencx - Accessed . https://www.scien.cx/2022/03/01/what-is-connect-function-in-redux-or-reactjs/
IEEE
" » What is connect()() function in redux or reactjs ?." DEV Community | Sciencx [Online]. Available: https://www.scien.cx/2022/03/01/what-is-connect-function-in-redux-or-reactjs/. [Accessed: ]
rf:citation
» What is connect()() function in redux or reactjs ? | DEV Community | Sciencx | https://www.scien.cx/2022/03/01/what-is-connect-function-in-redux-or-reactjs/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.