Redux connect function explanation

Question

I am new to redux framework. What is App means in the below code. Is it passing Type, Class to connect function? I would like to know how does it work. Apparently connect function returns a new module for export. Can someone point to basic javascript example to understand this code.

export default connect(mapDispatchToProps)(App);

Answer 1

The connect() function is an example of a curried function. For JavaScript examples, see this. It's essentially a higher-order function that returns a higher-order component.

The two parts of the connect() function call that may be confusing:

1. 1st parentheses - these are the arguments the connect function takes - mapDispatchToProps is the 2nd argument out of four optional ones

2. Between the second set of parentheses is the presentational component (App) that you are seeking to connect to the Redux store via the connect method.

Connect is called with the arguments you pass in. There are essentially two steps since it's a curried function and must be called twice.

The first function call takes the arguments you passed in and returns a higher-order component (a function that takes in a component and returns another):

const enhance = connect(mapDispatchToProps); // 1st call - returns HOC

Next, your App (presentational) component is passed to that higher-order component returned by the 1st call and now stored in enhance

enhance(App); // 2nd call - returns container component

We are 'wrapping' the App component, providing it with all the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.

So, the 2nd call returns a new "connected"/container App component that is connected to the Redux store with all the props/actions injected into it. And that is what gets exported in your snippet. You can read more here: HOC - React Docs

Hope that cleared it up!

Answer 2

In react-redux the connect function itself returns another function, not a plain value. So the syntax you're seeing here is simply function calls, whereby the result of connect(mapDispatchToProps) is a function which is then called with the parameter App. Here's a simple example of a function that returns a function that you can try in a js console.

function makeAdder(x) {
  function adder(y) {
    return x + y;
  }
  // return the inner `adder` function from the `makeAdder` function
  return adder;
}

console.log(makeAdder(5)(4)); // prints 9

Answer 3

1. App is the current component name, if your component name is Mycomp then you can bind with Mycomp if it's a class component. If it is a functional component this could be the const name to which your component s assigned to.
2. If a mapStateToProps function is specified, the new wrapper component will subscribe to Redux store updates. This means that any time the store is updated, mapStateToProps will be called. The results of mapStateToProps must be a plain object, which will be merged into the wrapped component’s props. If you don't want to subscribe to store updates, pass null or undefined in place of mapStateToProps.
3. Conventionally called mapDispatchToProps, this second parameter to connect() may either be an object, a function, or not supplied.Your component will receive dispatch by default.
4. React and redux are 2 different libraries. Connect is a pure function that establish link between them. To understand deep about how connect works, please debug the react-redux library connect method code, I hope that will give you some idea.

Answer 4

App(you can use any name) is javascript module which is connected to Redux store with connect function, for using connect function you need to import react-redux.connect(mapDispatchToProps)(App) syntax is an example of Higher order component. Redux-connect

Answer 5

redux is a type of temporary storage which stores data and connects method is used to connect the redux store to access data from any components.