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

rohiitbagal profile image

Learning New Things

Rohit -

muzammil-cyber profile image

Node.js? More Like No-Go Slow! Bun.js and Elysia.js to the Rescue ✨

Muhammad Muzammil Loya -

arshadayvid profile image

How to have AI onboard your users (Next.js, OpenAI, CopilotKit)

David Asaolu -

caresle profile image

Creating my own homelab

Carlos Estrada -