React-Redux connect function

React-Redux connect function
0

#1

I have a syntax question about the connect function in Redux. I’m getting pretty comfortable using it and I understand conceptually what it is accomplishing, which is connecting Redux to the React component you are applying it to. Specifically, providing the component access to the pieces of state you want it to be able to access and giving it access to action creators as callbacks it can call. This all becomes available in the component’s props.

However, what is the syntax used to accomplish this? I’m really unfamiliar with this:

connect()(TodoApp)

or

connect(state => state)(TodoApp)

where you are just wrapping the component in parentheses after calling connect. I’ve also seen this syntax:

@connect(
   state => ({ state: state.appState }),
   actions => ({ actions: bindActionCreators(actions, dispatch) })
)
class App extends React.Component {
   render() {
      return (
         <div> App </div>
      )
   }
}

export default App

Although I’ve been writing this I’ve got no clue how what this syntax is/represents in JavaScript.


#2

I did not use Redux in any of my projects, so I can’t speak to that, but I can tell you a bit about the syntax.

connect()(TodoApp)

means that the function connect() returns another function, and should then run that function with the argument TodoApp.

function aFunction() {
  return anotherFunction(arg) {
    //do things
  }
}

aFunction()(anArg); // anArg becomes arg above.

=> is the ES6 fat-arrow function operator. They allow you to write very terse anonymous functions. I am, however, not sure why state => state is useful, because that is, to my understanding, the same thing as this:

(function (state) {
  return state;
})();

but perhaps connect() only accepts a function an argument? That seems sort of silly but it’s my best guess.

(Note => also treats this differently than an anonymous function in that it does not create its own this but continues to use its parent’s)

@connect is a decorator, which is kind of a complex new spec for ES7, and explained here Javascript Decorators. I am surprised to see it, but maybe Babel supports it with some options? Maybe someone else can explain better than I can for this one.

The funny state => ({ state: state.appState }), syntax is because for an => function to return an object, the object must be wrapped in parentheses. Otherwise the => function treats the {} as block notation, which is necessary if the function has more than one statement.

class App extends React.Component

is the same as React.createClass() but is preferred because it uses ES6’s class syntax, which is philosophically more compliant with how React operates. The official React docs use this syntax.


#3

Awesome! Thanks @Tattomoosa! That totally clarifies this for me. I have a “transform-decorators-legacy” plugin in my .babelrc which must be supplying the support for the decorator syntax.

Also, just to clarify the state => state I added just as a placeholder for the mapStateToProps function so the connect function would still be valid. That would map the entire state to props I believe, or you can map only specific pieces of state by specifying them, e.g. state => state.user, or you can omit state altogether if you just want access to action creators by passing null as the first argument to connect().

Otherwise thanks a ton! The decorator syntax, explanation of connect()(App), and the explanation of the => ({ }) make totally sense and now I understand what’s going on here.

I like working React/Redux because they are helping me understand all the ES6/7 bells and whistles by seeing them in action.


#4

Glad to help! Trying to explain them really helped solidify them in my head as well, I think.