I think I understand the pieces now... React Functional Components: Are the preferred kind of component we write in React-Redux Are functions that take a "props" object Are the preferred way to output visual stuff and wire up events The Redux Store: Has all the state which we can display Has the dispatch(action) method, which is the only way to change state Your Mission (should you choose to accept it): Use the state and the dispactch(action) function Create props which are data values needed by the functional component Create props which are event handlers that call dispatch(action) The Locations: mapStateToProps : Here you get the state and return props which are just data mapDispatchToProps : Here you get the dispatch function and return props which call it And then React-Redux's "connect" function magically combines the mapping functions and your functional component into a new component which you elsewhere. ---------------------...
This is the story of Jerry JavaSript's Automated Slow Doughnut Shop. One day, I wanted a doughnut. So I rode my bike to the automated slow doughnut shop, where they have a slow doughnut machine. You put in a dollar. And then the machine mixes batter, heats the fat, drops the batter into the fat, lifts it out on a linked metal conveyor belt, dusts it with sugar, and drops it into your waiting hands. Once I get my doughnut, I can eat it in the usual manner. But from the time I put in my dollar until the time I receive my doughnut, I am blocked. Fortunately, the slow doughnut machine has a slot labeled, "Insert callback here". This is great. I code up a function eatDoughnut(doughnut) . I can reference my teeth, esophagus, stomach, and so on, because they are mine and I know all about them. And then I slip my eatDoughnut(doughnut) function into the slot and get on my bike and ride to the office while the slow doughnut machine is still mixing...
I read and reread docs and tutorials about "ref", but they never quite connected with my general knowledge of JavaScript. So I did more digging and here's what I found: Ref's are a way to get a reference to an actual HTML DOM node that was generated by React. (They can also get a reference to a React component instance, but I'm not going there today.) React.createRef() just returns a new object like {current:null}. So I assume that's what a ref looks like. From looking at examples... when some element includes an attribute called "ref", like this: <foo ref={expression_that_evaluates_to_a_ref} /> ...then the JSX is compiled into some JavaScript which assigns a reference to the foo DOM node to the "current" property of that ref object. So we use this by calling React.createRef() and putting a reference to the ref object somewhere where we will be able to get it later. Then after render() runs and our ref object's ...
Comments
Post a Comment