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

The reducer is, again, a pure function! It's quite easy to see what we need to validate actually, basically every `case` of our `switch` needs to have a test:

```JS
export default function mainReducer(state = initialState, action) {
  switch (action.type) {
    case 'CHANGE_LOCATION':
      return state.set('location', action.location);
    case 'SET_DATA':
      return state.set('data', fromJS(action.data));
    case 'SET_DATES':
      return state.set('dates', fromJS(action.dates));
    case 'SET_TEMPS':
      return state.set('temps', fromJS(action.temps));
    case 'SET_SELECTED_DATE':
      return state.setIn(['selected', 'date'], action.date);
    case 'SET_SELECTED_TEMP':
      return state.setIn(['selected', 'temp'], action.temp);
    default:
      return state;
  }
}
```

Let's showcase this on the `'CHANGE_LOCATION'` case, first create a `reducer.test.js` file in the `__tests__ /` directory, import the reducer and add the basic structure:

```JS
// __tests__/reducer.test.js
import mainReducer from '../reducer';

describe('mainReducer', function() {

});
```

The first branch of the switch statement we'll test is the `default` one – if we don't pass any state and an empty action in it should return the initial state. The thing is that the `initialState` is an immutable object, so we'll need to import `fromJS` too:

```JS
// __tests__/reducer.test.js
import mainReducer from '../reducer';
import { fromJS } from 'immutable';

describe('mainReducer', function() {
  it('should return the initial state', function() {
    expect(mainReducer(undefined, {})).toEqual(fromJS({
			location: '',
		  data: {},
		  dates: [],
		  temps: [],
		  selected: {
		    date: '',
		    temp: null
		  }
		}));
  });
});
```

You should now see this output:

```
PASS  src/__tests__/actions.test.js (0.365s)
PASS  src/__tests__/reducer.test.js (0.215s)
13 tests passed (13 total in 2 test suites, run time 0.519s)
```

Brilliant! Let's showcase how we can test specific actions, again using our beloved `'CHANGE_LOCATION'` one.

First, add a new `it` explaining what the reducer should do:

```JS
// __tests__/reducer.test.js
import mainReducer from '../reducer';
import { fromJS } from 'immutable';

describe('mainReducer', function() {
  it('should return the initial state', function() {/* … */});

  it('should react to an action with the type CHANGE_LOCATION', function() {

  });
});
```

Then, validate that the reducer changes the `location` field in the state correctly:

```JS
it('should react to an action with the type CHANGE_LOCATION', function() {
  var location = 'Vienna, Austria';
  expect(mainReducer(undefined, {
    type: 'CHANGE_LOCATION',
    location: location
  })).toEqual(fromJS({
    location: location,
    data: {},
    dates: [],
    temps: [],
    selected: {
      date: '',
      temp: null
    }
  }));
});
```

Now we know that our action returns an object with a `type` of `"CHANGE_LOCATION"` and that our reducer changes the `location` field in the state correctly in response to an object with a `type` of `"CHANGE_LOCATION"`! Brilliant!

Let's do the same thing for our `'SET_DATES'` case, first add the `it`:

```JS
// __tests__/reducer.test.js
import mainReducer from '../reducer';
import { fromJS } from 'immutable';

describe('mainReducer', function() {
  it('should return the initial state', function() {/* … */});

  it('should react to an action with the type CHANGE_LOCATION', function() {/* … */});

  it('should react to an action with the type SET_DATES', function() {

  });
});
```

Then make sure our reducer acts accordingly:

```JS
it('should react to an action with the type SET_DATES', function() {
  var dates = ['2016-01-01', '2016-02-02'];
  expect(mainReducer(undefined, {
    type: 'SET_DATES',
    dates: dates
  })).toEqual(fromJS({
    location: '',
    data: {},
    dates: dates,
    temps: [],
    selected: {
      date: '',
      temp: null
    }
  }));
});
```

Not too hard, eh? That's the power of redux!

Now that we have showcased how it works with those two examples, go ahead and test the other cases too!

----

Done? This is what your terminal output should look like when running `npm run test -- --verbose`:

```
PASS  src/__tests__/actions.test.js (0.365s)
 actions
   changeLocation
     ✓ it should have a type of CHANGE_LOCATION (5ms)
     ✓ it should pass on the location we pass in (1ms)
   setSelectedDate
     ✓ it should have a type of SET_SELECTED_DATE (1ms)
     ✓ it should pass on the date we pass in
   setSelectedTemp
     ✓ it should have a type of SET_SELECTED_TEMP (1ms)
     ✓ it should pass on the temp we pass in
   setData
     ✓ it should have a type of SET_DATA (1ms)
     ✓ it should pass on the data we pass in
   setDates
     ✓ it should have a type of SET_DATES
     ✓ it should pass on the dates we pass in (1ms)
   setTemps
     ✓ it should have a type of SET_TEMPS
     ✓ it should pass on the temps we pass in (1ms)

PASS  src/__tests__/reducer.test.js (0.515s)
 mainReducer
   ✓ it should return the initial state (7ms)
   ✓ it should react to an action with the type 'CHANGE_LOCATION' (1ms)
   ✓ it should react to an action with the type 'SET_DATA' (3ms)
   ✓ it should react to an action with the type 'SET_DATES' (4ms)
   ✓ it should react to an action with the type 'SET_TEMPS' (2ms)
   ✓ it should react to an action with the type 'SET_SELECTED_DATE' (1ms)
   ✓ it should react to an action with the type 'SET_SELECTED_TEMP'

19 tests passed (19 total in 2 test suites, run time 0.819s)
```

If you do not have all the 7 cases in your reducer tested, go back and try to do them all! It'll strengthen your testing muscle and help you get used to thinking this way!

When your output looks like the output above, you're done! This is what your `reducer.test.js` file should look like:

```JS
import mainReducer from '../reducer';
import { fromJS } from 'immutable';

describe('mainReducer', function() {
	it('should return the initial state', function() {
		expect(mainReducer(undefined, {})).toEqual(fromJS({
			location: '',
		  data: {},
		  dates: [],
		  temps: [],
		  selected: {
		    date: '',
		    temp: null
		  }
		}));
	});

	it("should react to an action with the type 'CHANGE_LOCATION'", function() {
		var location = 'Vienna, Austria';
		expect(mainReducer(undefined, {
			type: 'CHANGE_LOCATION',
			location: location
		})).toEqual(fromJS({
			location: location,
		  data: {},
		  dates: [],
		  temps: [],
		  selected: {
		    date: '',
		    temp: null
		  }
		}));
	});

	it("should react to an action with the type 'SET_DATA'", function() {
		var data = { some: 'data' };
		expect(mainReducer(undefined, {
			type: 'SET_DATA',
			data: data
		})).toEqual(fromJS({
			location: '',
		  data: data,
		  dates: [],
		  temps: [],
		  selected: {
		    date: '',
		    temp: null
		  }
		}));
	});

	it("should react to an action with the type 'SET_DATES'", function() {
		var dates = ['2016-01-01', '2016-02-02'];
		expect(mainReducer(undefined, {
			type: 'SET_DATES',
			dates: dates
		})).toEqual(fromJS({
			location: '',
		  data: {},
		  dates: dates,
		  temps: [],
		  selected: {
		    date: '',
		    temp: null
		  }
		}));
	});

	it("should react to an action with the type 'SET_TEMPS'", function() {
		var temps = ['31', '32'];
		expect(mainReducer(undefined, {
			type: 'SET_TEMPS',
			temps: temps
		})).toEqual(fromJS({
			location: '',
		  data: {},
		  dates: [],
		  temps: temps,
		  selected: {
		    date: '',
		    temp: null
		  }
		}));
	});

	it("should react to an action with the type 'SET_SELECTED_DATE'", function() {
		var date = '2016-02-01'
		expect(mainReducer(undefined, {
			type: 'SET_SELECTED_DATE',
			date: date
		})).toEqual(fromJS({
			location: '',
		  data: {},
		  dates: [],
		  temps: [],
		  selected: {
		    date: date,
		    temp: null
		  }
		}));
	});

	it("should react to an action with the type 'SET_SELECTED_TEMP'", function() {
		var temp = '31';
		expect(mainReducer(undefined, {
			type: 'SET_SELECTED_TEMP',
			temp: temp
		})).toEqual(fromJS({
			location: '',
		  data: {},
		  dates: [],
		  temps: [],
		  selected: {
		    date: '',
		    temp: temp
		  }
		}));
	});
});
```

Onwards to testing our components!

We'll test Redux reducers in our Weather app that's built with React and Redux.

1. React basics

2. Your first React app

3. Creating a forecast graph

4. State Management

5. ImmutableJS

6. Testing

Appendix

Testing Reducers