baniol

React Redux Walkthrough, part 3

Asynchronous API requests

So far, our application gets data from a hardcoded collection passed as a default state to the employees reducer function. However, for most of the web applications data should be loaded asyncronously from a remote server. The goal of this part is to provide this functionality with proper unit tests.

The application source code

switch to the 03-asyn-api branch and run npm install.

React Redux Walkthrough, part 2

Unit testing

I the first part of the series we learned what are the main React/Redux building blocks and how they interact to provide an easy to read and consistent data flow. Before we go further with the development it's a good time to take a step back and see how we can test the code written so far.

The code for the application can be found here - checkout to the 02-unit-testing branch and run npm install.

Note a few changes in the package.json file:

React-Redux Walkthrough

Introduction to the series

The purpose of this series is to provide a reader with an insight into the data flow in Redux applications and how React components fit into it. To illustrate the Redux architecture we will build a simple application - a list of employees filterable by position.

Each part of the series is going to have a separate branch in the repository.

We'll start with a simple static data collection, progressively adding features and tools such as unit tests, async API calls, debugging tools routing and middleware.

	package main

	import (
	"fmt"
	tea "github.com/charmbracelet/bubbletea"
	"os"
	)

	func main() {

	{
	"key": "alt+f", // key to press to activate command
	"command": "settings.cycle", // `settings.cycle` is the command that's actually being run, from the extension `hoovercj.vscode-settings-cycler`
	"when": "editorTextFocus && editorLangId == 'rust'", // this keybinding is only active when (editor is in focus) and (the language is `rust`)
	"args": { // these are the arguments passed to `settings.cycle`
	"id": "rust-toggle-inlay-hints", // must be unique
	"overrideWorkspaceSettings": true,
	"values": [ // Note: use the same settings in each values object
	{
	"rust-analyzer.inlayHints.enable": false // sets the inlay hints off

	version: '2'
	services:
	myvault:
	image: vault
	container_name: myvault
	ports:
	- "127.0.0.1:8200:8200"
	volumes:
	- ./file:/vault/file:rw
	- ./config:/vault/config:rw

	txtblk='\e[0;30m' # Black - Regular
	txtred='\e[0;31m' # Red
	txtgrn='\e[0;32m' # Green
	txtylw='\e[0;33m' # Yellow
	txtblu='\e[0;34m' # Blue
	txtpur='\e[0;35m' # Purple
	txtcyn='\e[0;36m' # Cyan
	txtwht='\e[0;37m' # White

	bldblk='\e[1;30m' # Black - Bold

	var http = require('http');

	var httpOptions = {
	host: 'http://api.icndb.com/jokes',
	// host: 'http://www.wp.pl',
	path: 'random'
	};

	http.get(httpOptions, requestHandler);

	var fs = require('fs');
	var path = require('path');

	var dir = path.join(__dirname, './');

	// var dir = '/Users/marcinbaniowski/Downloads';

	var readPromise = new Promise((resolve, reject) => {
	fs.readdir(dir, (err, files) => {
	resolve(files);

	/*
	In the node.js intro tutorial (http://nodejs.org/), they show a basic tcp
	server, but for some reason omit a client connecting to it. I added an
	example at the bottom.

	Save the following server in example.js:
	*/

	var net = require('net');