DEV Community

Discussion on: What is connect()() function in redux or reactjs ?

View post
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.