import React, { useEffect } from "react";

// We need to import connect
import connect from "react-redux";

// We're importing our action function from our actions store
import { actionFunction } from "./store/actions/actionFile"

function App() {

  /* Since we have added our action function to the object in our
  connect HOC we can access that function through props */
  const onClick = () => props.actionFunction()

  return (
    <div>
      <h1>Hello, world!</h2>
      {/* we have mapped out the state from our reducer to 
      our props where we can access it now */}
      <button onClick={onClick}>{props.stateIWant}</button>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    stateIWant: state.reducer.stateIWant
  }
};

/* connect HOC takes in a mapStateToProps function as first object
and takes in an object that we can add our action functions too so
that we can dispatch our actions */
export default connect(
  mapStateToProps, 
  { actionFunction }
)(App);

import React, { useEffect } from "react";

// These are the two hooks we get from the react redux api
import { useSelector, useDispatch } from "react-redux";
// useSelector replaces the mapStateToProps in our connect HOC
// useDispatch replaces the object we add our action functions to

// We're importing our action function from our actions store
import { actionFunction } from "./store/actions/actionFile";

export default function App() {
  // This is the convention for setting up your useDispatch every time
  const dispatch = useDispatch();

  /* We are passing our action function through our useDispatch so that
  we can dispatch our action function */
  const onClick = () => dispatch(actionFunction());

  // Here we are using useSelector to grab the state we want from our reducer
  const stateIWant = useSelector(state => state.reducer.stateIWant)

  return (
    <div>
      <h1>Hello, world!</h2>
      {/* we no longer need to access stateIWant from props because we gave it
      it's own variable */}
      <button onClick={onClick}>{stateIWant}</button>
    </div>
  );
}

const { first, second, third } = useSelector(state => state.reducer)
// Is equivalent to:
const first = useSelector(state => state.reducer.first)
const second = useSelector(state => state.reducer.second)
const third = useSelector(state => state.reducer.third)