Gain insights into building a weather app with React, Redux, Immutable.js, and Jest. Learn about their problems and solutions, enhancing your app's performance and testing capabilities.

py.tar.gz

js_server

I'm Max Stoiber (@mxstbr) - the creator of react-boilerplate, one of the most popular react starter kits (10K+ stars on github).

I'll teach you how to build a real-world application using React, Redux and Immutable.js. We will use interactive playgrounds to create our app from scratch (no setup required).

The course can be divided into 4 logical parts: 

1. React: Understand what is React and what problem it solves. We'll build our first weather app using just React.
2. Redux: Identify potential issues in our React app and learn how Redux & Redux-Thunk can solve those issues. 
3. Immutable.js: Learn Immutable.js and how it can help in making our Redux apps performant. 
4. Jest: Lastly, we will learn how to test our React/Redux app using Jest.

If you are going to build a production app, chances are that you are going to use all of the above technologies so let's get started. 

* Understanding of Javascript is required. 
** Understanding of ES6 (let/const, arrow functions etc.) would be beneficial.

Learn React.js, Redux & Immutable.js while building a weather app

We've been using a top-level component called `App` to manage our global application state. That works fine for a small application, but as we add more and more functionality it becomes very tedious to work with.

Together with React, Facebook released something called Flux. Flux is a methodology that helps you manage your global application state. Flux works fine, but has the downside that it uses events, which can lead to quite a bit of confusion.

Thankfully, <a target="_blank" href="https://twitter.com/dan_abramov">Dan Abramov</a> stepped in and created Redux. Redux has the same core concept as Flux, but works without events, is much easer to understand and now basically the standard for application state management.

> Note: None of the following concepts and technologies are **necessary** to build a production app with react. Many people use them to their advantage, but they have some downsides too. (which we'll examine)

# The Concept

Remember the initial state of our `App` component? It looks like this:

```JS
state = {
  return {
    location: '',
    data: {},
    dates: [],
    temps: [],
    selected: {
      date: '',
      temp: null
    }
  };
};
```

The object we return from this function is our entire application state. At the first start of our application, our state thus looks like this:

```JS
{
  location: '',
  data: {},
  dates: [],
  temps: [],
  selected: {
    date: '',
    temp: null
  }
}
```

When users now change the location input field, the `location` field of our state changes:

```JS
{
  location: 'Vienna, Austria',
  data: {},
  dates: [],
  temps: [],
  selected: {
    date: '',
    temp: null
  }
}
```

Instead of directly changing that location with `this.setState`, we'll call a function called `changeLocation` from our component. Redux will pick up that said function was called, do its magic and change the `location` field of our application state.

Now that the location is different and thus our application state has changed, our main `<App />` component will automatically rerender with the new data! (just like with component state)

The big advantage of this approach is that the component no longer needs to know how exactly we save the location. We could be persisting it as a coordinate, we could save it without whitespace, but the component doesn't have to care about that—the component only calls `changeLocation` and that's it! The application state is thus decoupled from the individual components.

This cycle of state management thus looks like this:

Learn how to handle application state in a centralized store with Redux, the most popular unidirectional data flow library!


React state management: Flux and Redux

Learn how to handle application state in a centralized store with Redux, the most popular unidirectional data flow library!

1. React basics

2. Your first React app

3. Creating a forecast graph

4. State Management

5. ImmutableJS

6. Testing

Appendix

React state management: Flux and Redux