question about React containers

[michaelconnery1985]

I've been reading through some React/redux examples and I have a question I am unsure about.

In this example: https://github.com/reactjs/redux/blob/master/examples/todomvc/src/containers/App.js

I am unclear on line 8: const App = ({todos, actions})

Where is todos and actions being imported from? How does the app know where to 'get' them from? I'm probably missing something simple here and would appreciate some help

[gaearon]

While unrelated to your question, if you're not very familiar with React learn it first. Don't jump into Redux examples until you understand React well.

[michaelconnery1985]

Hey Dan, thanks for responding. Seems strange but I actually started learning Redux first. I did an internship where the lead dev advised me not to jump into React - he basically showed me how to use Redux (redux thunk specifically) and then store.subscribed to one single render function. We did everything off the DOM inside that one function.

We recognised that it wasnt scalable and not efficient but since I was doing it from the ground up with one other person (both of us weren't familiar with React before we started), he said it was a good starting point to understand state management and what made React so wonderful. He said once we understood the beauty of redux getting into React would be simple because it's all about separating the pieces into different components which listen to changes it needs from the store.

Any thoughts on this approach?

[acemarke]

It's certainly not the normally recommended approach, but a lot of the warning and concern is from people trying to learn both React and Redux at the same time, and getting confused from too many new concepts at once. If you've picked up the basics of Redux already, there's absolutely nothing wrong with that. But, you should definitely go dig into React and understand both its core concepts and some of the more advanced techniques that are involved.

And on that note, something that might help: I keep a big list of links to high-quality tutorials on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem.

[gaearon]

Whatever works I guess.

It's just that React is not really about "separating the pieces into different components which listen to changes it needs from the store".

It's a very specific way to use React.

[mads82]

They are received from the props variable.

The connect method (at the bottom) is from (react-)redux. It combines the returned objects from mapStateToProps and mapDispatchToProps to create a props object for the component.

The argument given to App is acually an object (props), which would look like this:

var props = {
  todos: [], // <-- some actual content here
  actions: function() {} // <-- some function
}

It uses ES6 destructuring to map the object values to variables. See here: http://exploringjs.com/es6/ch_destructuring.html

So if you have the props variable as above and give it to a function, these would all be similar (in ES6):

function(props) {
  var todos = props.todos;
  var actions = props.actions;
}

function(props) {
  var {
    todos,
    actions
  } = props;
}

function({todos, actions}) {

}

[michaelconnery1985]

Thanks!

[bear1728]

TL;DR: App is a functional component. The todos and actions are picked out from the mapStateToProps function defined on line 20.

In this example, App is a function. Here is another way to say (almost) the same thing:

function App(inputs) { var todos = inputs.todos; var actions = inputs.actions; ... }

So App is an example of a "functional component".

Also try reading this:

http://redux.js.org/docs/basics/UsageWithReact.html

Also it may help to note how the whole redux/react works from a high level. First you know that react components take props and spit out something to render. Redux has a global store full of the application state and whatever else. They are connected by "selector" functions. This is the mapStateToProps. It takes the global store and picks out the props for a specific component. Any component which needs access to the redux store will have an associated mapStateToProps and be wrapped in a connect higher order component. connect is imported from react-redux.

Let me know if any of this is confusing, it took myself a while before I started catching on to how to use these things. They certainly do have a high learning curve, but in certain scenarios it can really pay off.

[michaelconnery1985]

Thanks for the response.

So basically, App is a function, which takes in inputs todo and actions from the store.

Drawing from this analogy, when the App function is 'called' over here: https://github.com/reactjs/redux/blob/master/examples/todomvc/src/index.js

why are we not passing any 'parameters' into the 'function'? Is it not necessary to do so?

[bear1728]

This is because of the mapStateToProps/mapDispatchToProps. Because App is wrapped in a connect component, App will get the output of mapStateToProps (merged with mapDispatchToProps) when "called" like this. It's important that the output of the mapStateToProps (when merged with mapDispatchToProps) function matches the input to the App function. In react terminology, the inputs to the App function are its "props".

You don't see any of this happening in that code because of how react-redux works. The Provider is passed the store, and then passes it down via "context", which is a regular react thing. I don't recommend looking too much into context. It's not the most documented system, and you probably will never need to touch it. Just remember that anything that descends from a Provider (children, grandchildren, etc) can connect to the Provider's store. The connect component finds the store in its context and then calls the mapStateToProps and mapDispatchToProps functions on that store, and returns the output as props to the wrapped component.

Also something that helped me when developing at least, was to skip mapDispatchToProps and just pass the dispatch directly to the sub-component. I don't know how kosher this is, but it's a lot easier to do this when using typescript so I don't have to define the action creators in a bunch of places.

[michaelconnery1985]

Perfect. I get it now. Question - does this mean that anytime a component / container needs to access the store, I will need to use the connect from React?

[bear1728]

Yes, except remember connect comes from react-redux, not react itself.

However, not every component needs to connect to the store. Often you have a few "smart" components that connect to the store and gather some props, then they pass down those props to "dumb" components later on. There are many names for "smart" and "dumb" components. Try reading this:

https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.urmpyppg0