ryanjyost

 updateInput(key, value) {
    // update react state
    this.setState({ [key]: value });

    // update localStorage
    localStorage.setItem(key, value);
  }

ryanjyost

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newItem: "",
      list: []

ryanjyost

{fetching ? 
  (<button disabled>Fetching...</button>) : 
  (<button onClick={onRequestDog}>Request a Dog</button>)
}

ryanjyost

 
{error && <p style={{ color: "red" }}>Uh oh - something went wrong!</p>}

ryanjyost

{dog ? 
  (<p className="App-intro">Keep clicking for new dogs</p>) : 
  (<p className="App-intro">Replace the React icon with a dog!</p>)
}

ryanjyost

 <header className="App-header">
    <img src={dog || logo} className="App-logo" alt="logo" />
    <h1 className="App-title">Welcome to Dog Saga</h1>
 </header>

ryanjyost

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

import { connect } from "react-redux";

class App extends Component {
  render() {
    const { fetching, dog, onRequestDog, error } = this.props;
    

ryanjyost

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";

import { createStore, applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import { Provider } from "react-redux";

ryanjyost

import { takeLatest, call, put } from "redux-saga/effects";
import axios from "axios";

// watcher saga: watches for actions dispatched to the store, starts worker saga
export function* watcherSaga() {
  yield takeLatest("API_CALL_REQUEST", workerSaga);
}

// function that makes the api request and returns a Promise for response
function fetchDog() {

ryanjyost

// action types
const API_CALL_REQUEST = "API_CALL_REQUEST";
const API_CALL_SUCCESS = "API_CALL_SUCCESS";
const API_CALL_FAILURE = "API_CALL_FAILURE";

// reducer with initial state
const initialState = {
  fetching: false,
  dog: null,
  error: null