GithubHelp home page GithubHelp logo

reduxcasts's Introduction

ReduxCasts

Completed code examples from Modern React with Redux

Each example from the course can be found within this repo. You can either look at the files in a completed state, or check out the changes that were made in a particular section by clicking on one of the links below.

reduxcasts's People

Contributors

cniesen avatar stephengrider avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

reduxcasts's Issues

react-redux-state-going-to-init-on-route-change-with-nginx

Hi Stephen,
I took your Modern React with Redux course in Udemy (and many others) and found it quite useful to build a profession (getting hired) and day to day activities.

I was developing a react app that uses redux, which uses express.js as backend API server and postgres as db (which is exactly like the example from your Docker and Kubernetes course). However, I hit a wall when the Redux state was reset (it issues the @@init event) every time route changes on the react app. How can I make it retain the state ? Can you please guide me ? (perhaps redirect me to an example)

https://stackoverflow.com/questions/62067410/react-redux-state-going-to-init-on-route-change-with-nginx

TypeError: Cannot read property 'city' of undefined(chrome).. TypeError: cityData is undefined(Mozilla)

type error 1

error details

 `import React, {Component} from "react";
  import {connect} from "react-redux";
  import {Sparklines, SparklinesLine} from 'react-sparklines';

  class WeatherList extends Component {
    renderWeather(cityData) {  
        /* if(typeof cityData==='undefined'){
         return cityData
               } */
     const name=cityData.city.name;
     const temps =cityData.list.map(weather=> weather.main.temp);
     return (
    <tr key={name}>
    <td>{name}</td>
    <td>
    <Sparklines height={120} width={100} data={temps}>
    <SparklinesLine color="green"/>
    </Sparklines>
    </td>
    </tr>

   );
   }
      render() {
       return (
        <table className="table table-hover">
        <thead>
            <tr>
                <th>City</th>
                <th>Temperature</th>
                <th>Pressure</th>
                <th>Humidity</th>
               </tr>
            </thead>
          <tbody>

           { this .props.weather.map(this.renderWeather)}

          </tbody>
        </table>

               );
            }
          }
        function mapStateToProps({weather}) {
               return
              {  weather };                           // {weather}== {weather: weather}
                 }
        export default connect(mapStateToProps)(WeatherList);`

Uncaught Type error

Just downloaded the repo and ran the npm install and npm start.
The weather app is not running due to a type error.

Super expression must either be null or a function, not undefined

weather example does not work?

Hello. The weather app example didn't work. I followed the tutorial and my code didn't work. I tried it with the code here, it didn't work either.

I also changed the api key to mine. It didn't help.

The error in the console

Uncaught TypeError: Super expression must either be null or a function, not undefined

Is it only for me? or does anybody have a same issue?

some question about onDeleteClick method

onDeleteClick() {
this.props.deletePost(this.props.params.id)
.then(() => { this.context.router.push('/'); });
}

export function deletePost(id) {
const request = axios.delete(${ROOT_URL}/posts/${id}${API_KEY});

return {
type: DELETE_POST,
payload: request
};
}

The function "deletePost" does not return a promise. so why the "then" method in function "onDeleteClick" can direct call?

Uncaught ReferenceError: SparkLinesLine is not defined

At section 5) lesson 65) Adding Sparkline Charts I am getting the below error after I input a city name, then hit the submit button. After reading through some of these older issues and the Q&A, have tried uninstalling and installing react-sparklines in the following ways, with no luck:

$ npm install --save react-sparklines
$ npm install --save [email protected]
$ npm install --save [email protected]
$ npm install --save [email protected]

sparklinesline-error

update to newer versions

Hi Stephen!,

I'm revisiting the course and thought about using React v-16.0 and newer versions in the
package.json file? Do you think you could update or should I try and do a pull request?

Update React-Router from 2.0.0 to 2.5.2

If you use react-router 2.0.0, you will get multiple warnings in the console. To avoid this, install react-router 2.5.2 instead.

If you already installed version 2.0.0, stop the server, and run npm uninstall [email protected] then run npm install --save [email protected]. When you restart the server npm start, the errors should be gone.

too much node_modules

Thanks for this repo, it's so useful to play and learn.

It seems though that when you run npm install on a project folder it installs a lot of useless modules. Am I missing something or it's an issue?
This way the node_modules folders are on an average of 100-150 MB.
Thanks!

In weather project, sparkline never showing

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Sparklines, SparklinesLine } from 'react-sparklines';

class WeatherList extends Component {
  renderWeather(cityData) {
  //  console.log(cityData)
    const name = cityData.city.name
    const temps = cityData.list.map(weather=>weather.main.temp)

    return (  
      <tr key={name}>
        <td>{name}</td>
        <td>
          <Sparklines height={120} width={180} data={temps}>
            <sparklinesLine color="red" />
          </Sparklines>
        </td>
      </tr>
    )
  }

  render() {
    return (
      <table className="table table-hover">
        <thead>
          <tr>
            <th>City</th>
            <th>Temperature</th>
            <th>Pressure</th>
            <th>Humidity</th>
          </tr>
        </thead>
        <tbody>
          {this.props.weather.map(this.renderWeather)}
        </tbody>
      </table>
    )
  }
}

function mapStateToProps(state) {
  return { weather: state.weather }
}

export default connect(mapStateToProps)(WeatherList)

I'm wrote my code above. and modify sparkline 1.7 to 1.6
Error was missing but never showing sparkline in my browser..
Anyone know?

updating packages

Hi Stephen,

I just started the Udemy course and appreciate it.
I noticed the first project 'video_browser' hasn't been updated in a year.
I updated the packages to the latest version and then fixed some syntax in 2 files:

  • .babelrc
  • webpack.config.js

Happy to push the changes and create a pull request. Thanks again

Can't get vs-code to debug it..

When using the npm create-react-app the launch.json shows:
"scripts": {
"start": "react-scripts start",
....

This project uses webpack and has:
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},

and I tried adding --inspect to node but nope..

Anybody else have any luck with this?

js:208 Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters

I downloaded it from the storage and ran it, but the error below comes out? Even though I replaced the API key with mine, I get the same error. How do we solve this?

`import axios from "axios";

const API_KEY = "MY API KEY";
const ROOT_URL = http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY};

export const FETCH_WEATHER = "FETCH_WEATHER";

export function fetchWeather(city) {
const url = ${ROOT_URL}&q=${city},us;
const request = axios.get(url);

return {
type: FETCH_WEATHER,
payload: request
};
}
`

Loading the Google Maps JavaScript API without a callback is not supported: https://developers.google.com/maps/documentation/javascript/url-params#required_parameters

how do i solve this?

Cannot find module "./components/search_bar"

This references lecture #14. Any ideas why one would get the above error? I've checked to make sure that the file is placed in the correct location and looks very similar to the file you have in your video.

axios merge problem

I dont know if i'm in the right place to report that but i just wanted to point out that in [email protected] it doesn't merge params from api file need to go back to 0.18

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.