DEV Community

imsabir
imsabir

Posted on

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

#react #javascript #programming #redux

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;
}
Enter fullscreen mode Exit fullscreen mode

Curried Function:

function sum_curried(a) {
    return function (b) {
        return function (c)  {
            return a + b + c
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Calling partial function:

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

Calling Curried function:

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

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

let res3 = sum_curried(1)(2)(3);
console.log(res3); //6
Enter fullscreen mode Exit fullscreen mode

Working JS Fiddle here

For in deep working of connect go here
For more such contents follow @msabir

Cheers!!

Top comments (3)

Collapse
 
peerreynders profile image
peerreynders •

Nitpick: connect

function connect(
  mapStateToProps?, 
  mapDispatchToProps?, 
  mergeProps?, 
  options?
)
Enter fullscreen mode Exit fullscreen mode

Currying versus partial application (with JavaScript code)

  • Currying is transforming a function of arbitrary arity into a composition of 1-ary functions.
  • Partial application is producing a function of reduced arity by binding fixed values to some of the original function’s arguments.

While connect does return a 1-ary function that accepts a component and returns a wrapper component, the initial connect() call accepts up to 4 arguments - not just exactly one argument as it is the case with currying.

From that perspective in looks more like partial application of an imaginary

function connect(
  mapStateToProps = undefined, 
  mapDispatchToProps = undefined, 
  mergeProps = undefined, 
  options = undefined,
  wrappedComponent
)
Enter fullscreen mode Exit fullscreen mode

function i.e.

connect(
  mapStateToProps, 
  mapDispatchToProps, 
  mergeProps, 
  options,
)(wrappedComponent)
Enter fullscreen mode Exit fullscreen mode

rather than curried

connect(
  mapStateToProps)(
  mapDispatchToProps)(
  mergeProps)(
  options)(
  wrappedComponent
);
Enter fullscreen mode Exit fullscreen mode

Also

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

function partialApply(fn, one) {
  return function (...rest) {
    return fn(one, ...rest);
  };
}

const sum1 = partialApply(sum, 1);
const sum1_2 = partialApply(sum1, 2);

console.log(sum1_2(3));  // 6
console.log(sum1(2, 3)); // 6
Enter fullscreen mode Exit fullscreen mode
Collapse
 
msabir profile image
imsabir •

Very nicely explained in dept. Great !!, this blog was more intended to understand the underline concept behind connect() function and you made it better by explaining the working procedure in dept. Kudos to you.

Collapse
 
msabir profile image
imsabir •

Whats your thoughts in this ?

Read next

duubemmm profile image

Installing And Running NPM Packages Using The Terminal

Chidubem Okoli -

arnab2001 profile image

MUI Stack: Mastering One-Dimensional Layouts in React

Arnab Chatterjee -

mateuscechetto profile image

Allowlist vs Denylist: When to use them

Mateus Cechetto -

dev_vaayen profile image

[DevLog #01] Gmail-TUI: Replicating The Gmail-Web Experience In Terminal

Vaayen -