https://frontendmasters.com/courses/intermediate-react-v2/completing-the-redux-wiring/

Finishing with Details.js

  --- a/src/Details.js
+++ b/src/Details.js
@@ -1,6 +1,7 @@
 import React from "react";
 import pet from "@frontendmasters/pet";
 import { navigate } from "@reach/router";
+import { connect } from "react-redux";
 import Carousel from "./Carousel";
 import Modal from "./Modal";
 import ErrorBoundary from "./ErrorBoundary";
@@ -50,16 +51,12 @@ class Details extends React.Component {
         <div>
           <h1>{name}</h1>
           <h2>{`${animal} — ${breed} — ${location}`}</h2>
+// can delete all this don't need
-          <ThemeContext.Consumer>
-            {([theme]) => (
-              <button
-                style={{ backgroundColor: theme }}
-                onClick={this.toggleModal}
-              >
-                Adopt {name}
-              </button>
-            )}
-          </ThemeContext.Consumer>
+          <button
+            style={{ backgroundColor: this.props.theme }}
+            onClick={this.toggleModal}
+          >
+            Adopt {name}
+          </button>
           <p>{description}</p>
           {showModal ? (
             <Modal>
@@ -76,10 +73,14 @@ class Details extends React.Component {
   }
 }
 
+ // read the props...
+const mapStateToProps = ({ theme }) => ({ theme });
+
+ // connect it ↴
+const WrappedDetails = connect(mapStateToProps)(Details);
+
 export default function DetailsErrorBoundary(props) {
   return (
     <ErrorBoundary>
-      <Details {...props} />
+      <WrappedDetails {...props} />
     </ErrorBoundary>
   );
 }

synchronous code

So far, all the code examples were with synchronous code, in other versions of this course there are more examples with asynchronous code, and Redux thunk.

This concludes the Redux part of the course, resetting his repo...