javascript - Redux connect function explanation - Stack Overflow

admin管理员组

文章数量:1277896

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);

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);

• javascript
• reactjs
• redux

Share Improve this question Follow edited Aug 26, 2019 at 5:26 muhammad800804 asked Aug 26, 2019 at 5:24 muhammad800804muhammad800804 11522 silver badges99 bronze badges 3

• 1 Please refer this sohamkamani./blog/2017/03/31/react-redux-connect-explained – Sain Pradeep Commented Aug 26, 2019 at 5:29
• This explains connect api. Does not answer my question. My question was regarding explanation of this javascript syntax. What does "App" stands here. Is it a parameter to connect function or does it means something other? – muhammad800804 Commented Aug 26, 2019 at 6:04
• 1 App is your presentational ponent that gets passed as an argument to the second call of the connect() function. See my full answer below. – Joel H Commented Aug 26, 2019 at 13:35

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 6

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 ponent.

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 ponent (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 ponent (a function that takes in a ponent and returns another):

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

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

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

We are 'wrapping' the App ponent, 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 ponent 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!

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

1. App is the current ponent name, if your ponent name is Myp then you can bind with Myp if it's a class ponent. If it is a functional ponent this could be the const name to which your ponent s assigned to.
2. If a mapStateToProps function is specified, the new wrapper ponent 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 ponent’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 ponent 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.

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 ponent. Redux-connect

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 ponents.

本文标签： javascriptRedux connect function explanationStack Overflow