Egghead Instructor Andrew Van Slaars

Andrew Van Slaars

Full stack JavaScript developer, currently focused on improving the state of end-to-end testing as a member of the Cypress.io team. I love learning new libraries, languages and tools and I'm passionate about sharing the things I learn with others.



Unlock all of Andrew's PRO Lessons
click for instant access!

Browse Andrew Van Slaars's lessons.

showing 83 lessons...

Filter State Data in Redux with a Selector Function and React Router

P

Configure a React & Redux Application For Production Deployment and Deploy to Now

P

Delete Existing Records on The Server with Redux Thunk and Fetch

P

Dispatch Asynchronous Actions with Redux Thunk Middleware

P

Add React Router to a Redux Application

P

Update Existing Records on The Server with Redux Thunk and Fetch

P

Respond to a Single Redux Action in Multiple Reducers

P

Use Multiple Reducers in Redux with combineReducers

P

Configure and Use Redux Dev Tools

P

Create a React Component to Display Status Messages

P

Save New Records on The Server with Redux Thunk and Fetch

P

Use mapDispatchToProps Shorthand Syntax in Redux

P

Setup a Mock API Server with the json-server npm module

P

Create Redux Dispatch Functions From Action Creators with bindActionCreators

P

Connect Redux to Individual React Components For More Efficient Rendering

P

Handle Actions in Redux with mapDispatchToProps

P

Keep UI and State Synchronized Using Controlled Components in React with Redux

P

Create a Redux Store

P

Connect Redux to a React Application with react-redux

P

Make Dispatching Redux Actions More Reliable With Action Creators

P

Render React UI Based on State Changes with Subscribe in Redux

P

Refactor JSX in React to Stateless Functional Components

P

Create a Redux-Style Reducer Function

P

Render in React Based on a Global State Object

P

Render a React UI with JSX

Bootstrap a React Application with Yarn & Create React App

Update React Component State Based on External DOM Events

P

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

P

Update State in React with Ramda's Evolve

P

Update Component State in React With Ramda Lenses

P

Understand Function Composition By Building Compose and ComposeAll Utility Functions

P

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

P

Create a Reusable Mapping Function with Ramda's Map

P

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

P

Create a Query String from an Object using Ramda's toPairs function

P

Filter an Array Based on Multiple Predicates with Ramda's allPass Function

P

Convert Object Methods into Composable Functions with Ramda

P

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

P

Refactor a Promise Chain to Function Composition using Ramda

P

Refactor to a Point Free Function with Ramda's useWith Function

P

Debug Function Compositions with Ramda's Tap Function

P

Get a List of Unique Values From Nested Arrays with Ramda

P

Create an Array From a Seed Value with Ramda's unfold

P

Handle Errors in Ramda Pipelines with tryCatch

P

Refactor to Point Free Functions with Ramda using compose and converge

P

Load Data From a Server with fetch

P

Delete Data on the Server with fetch

P

Update data on the Server with fetch

P

Show Temporary Messages in a React Application

P

Save Data to the Server with fetch

P
react tutorial about Filter State Data in Redux with a Selector Function and React Router

Filter State Data in Redux with a Selector Function and React Router

4:22 react PRO

In this lesson, we’ll wire up React Router to pass a url based filter parameter into our component and create a selector function to filter our state data between the store and our components by hooking into the ownProps parameter of mapStateToProps.

react tutorial about Configure a React & Redux Application For Production Deployment and Deploy to Now

Configure a React & Redux Application For Production Deployment and Deploy to Now

6:27 react PRO

In this lesson, we’ll make a few small changes to our scripts and add some environment variables that will be used at build time to get our application ready to be deployed to a production environment using the now service. Once properly configured, we’ll use the now CLI and publish our application to a production server.

react tutorial about Delete Existing Records on The Server with Redux Thunk and Fetch

Delete Existing Records on The Server with Redux Thunk and Fetch

6:14 react PRO

We’ll use fetch and an async action creator to send a DELETE request to the server and update the UI by removing the deleted item and displaying a success message once the save has completed successfully.

react tutorial about Dispatch Asynchronous Actions with Redux Thunk Middleware

Dispatch Asynchronous Actions with Redux Thunk Middleware

8:29 react PRO

In this lesson, we’ll be retrieving data from the server as well as posting new data to the server using fetch. We’ll make this work with Redux using the Thunk Middleware which will allow us to dispatch asynchronous actions.

react tutorial about Add React Router to a Redux Application

Add React Router to a Redux Application

2:50 react PRO

In this lesson, we’ll install React Router as a project dependency and add links that will update the url via pushState to avoid reloading our page on changes.

react tutorial about Update Existing Records on The Server with Redux Thunk and Fetch

Update Existing Records on The Server with Redux Thunk and Fetch

7:44 react PRO

We’ll use fetch and an async action creator to save updated data to the server and update the UI with the result of the update and a success message once the save has completed successfully.

react tutorial about Respond to a Single Redux Action in Multiple Reducers

Respond to a Single Redux Action in Multiple Reducers

3:09 react PRO

Every dispatched action in Redux is sent to all reducers. This means a single action can be handled in different ways by different reducers. In this lesson we’ll look at how this can be used to handle updates in multiple parts of our state tree in response to a single action.

react tutorial about Use Multiple Reducers in Redux with combineReducers

Use Multiple Reducers in Redux with combineReducers

6:21 react PRO

In this lesson we’ll add a new reducer to our application and combine it with the existing reducer. We’ll use the new reducer to display messages in our application. Because we are essentially creating namespaces within our state with multiple reducers we will need to combine them to create our Redux store. To do this we will need to refactor our existing components connections to the store to get back to a working state.

react tutorial about Configure and Use Redux Dev Tools

Configure and Use Redux Dev Tools

4:13 react PRO

One way data flow, pure reducers for updates and a global state object make unit testing and think about code much easier than the alternatives. With the tooling this makes possible, debugging can be a pleasant experience too. In this lesson, we’ll configure Redux Dev Tools for Chrome and take a tour of some of the features it offers to make debugging state in Redux a pleasure, such as Time Travel Debugging and the ability to export your state history or import state history from another session.

react tutorial about Create a React Component to Display Status Messages

Create a React Component to Display Status Messages

2:35 react PRO

In this lesson we’ll add a new stateless functional component to our application, update our CSS and verify that our message component is rendered only when there is a message to display.

react tutorial about Save New Records on The Server with Redux Thunk and Fetch

Save New Records on The Server with Redux Thunk and Fetch

6:38 react PRO

We’ll use fetch and an async action creator to save updated data to the server and update the UI with the result of the update once the save has completed successfully.

react tutorial about Use mapDispatchToProps Shorthand Syntax in Redux

Use mapDispatchToProps Shorthand Syntax in Redux

1:42 react PRO

In this lesson we’ll take a mapDispatchToProps function and refactor it to use the available shorthand syntax to tidy our code up a bit.

react tutorial about Setup a Mock API Server with the json-server npm module

Setup a Mock API Server with the json-server npm module

1:35 react PRO

In this lesson we’ll install json-server as a dependency of our project so we can explore making API calls in a Redux-friendly way. We’ll update the scripts in package.json to allow us to run the server and verify it is responding by issuing a curl command.

react tutorial about Create Redux Dispatch Functions From Action Creators with bindActionCreators

Create Redux Dispatch Functions From Action Creators with bindActionCreators

2:10 react PRO

In this lesson we’ll look at the bindActionCreators helper method provided by Redux to eliminate some boilerplate code in our React application. Currently we have a function that takes in a value and calls an action creator. This pattern is extremely common in Redux and we will see how bindActionCreators can help us cut down on some bloat.

react tutorial about Connect Redux to Individual React Components For More Efficient Rendering

Connect Redux to Individual React Components For More Efficient Rendering

6:59 react PRO

A connected component will re-render whenever there is a state change. While we want state changes to update our UI, we don’t necessarily want every state change to render every UI component. In this lesson, we’ll use the connect function to connect components to their own specific pieces of the state tree to make our rendering more efficient.

react tutorial about Handle Actions in Redux with mapDispatchToProps

Handle Actions in Redux with mapDispatchToProps

2:37 react PRO

We need to get our dispatch functions into our components in order to respond to events in Redux. Connect’s second argument is a function called mapDispatchToProps and it does exactly what the name implies. In this lesson, we’ll use this function to get our dispatch functions into our components via props and refactor to use these functions accordingly.

react tutorial about Keep UI and State Synchronized Using Controlled Components in React with Redux

Keep UI and State Synchronized Using Controlled Components in React with Redux

6:45 react PRO

We’ll make the input field a “controlled component” by reacting to each change of the input and dispatching an action to the Redux store. Following this model gives us assurance that the UI is always a representation of the current application state.

react tutorial about Create a Redux Store

Create a Redux Store

2:23 react PRO

The redux store is the glue that holds this state management structure together. In this lesson we’ll use the redux library to create a store with the createStore function and then refactor our existing code to pass state into the app using the store’s getStore method.

react tutorial about Connect Redux to a React Application with react-redux

Connect Redux to a React Application with react-redux

4:08 react PRO

In this lesson, we’ll see how we can eliminate some of our plumbing code and take advantage of the react-redux library to connect our Redux store to our React application and let it handle subscribing to state changes in the store.

react tutorial about Make Dispatching Redux Actions More Reliable With Action Creators

Make Dispatching Redux Actions More Reliable With Action Creators

3:16 react PRO

Dispatching actions is how our application sends information to Redux in order to update state. While we could build our action objects inline and use strings for action names, this can be tedious and error prone. In this lesson, we’ll see how the use of constants and action creator functions will make dispatching actions easier and more reliable.

react tutorial about Render React UI Based on State Changes with Subscribe in Redux

Render React UI Based on State Changes with Subscribe in Redux

2:07 react PRO

The Redux store exposes a subscription mechanism, allowing us to detect state updates. In this lesson, we’ll take advantage of this by rendering our UI in response to state changes. We’ll also get our first look at the dispatch method that will be used to trigger those updates.

react tutorial about Refactor JSX in React to Stateless Functional Components

Refactor JSX in React to Stateless Functional Components

5:18 react PRO

We’ll refactor our existing code and break the pieces of the application into their own stateless functional components. We’ll use these components to build up our UI. We’ll also see how we can use ES6 destructuring syntax to accept just the keys we need from props to keep our JSX clean.

react tutorial about Create a Redux-Style Reducer Function

Create a Redux-Style Reducer Function

5:23 react PRO

The reducer is at the center of how Redux manages state. In this lesson we’ll create a reducer function and see how Redux takes in state and actions and returns updated state. We’ll write and run unit tests using Jest to verify that our reducer function is working as expected.

react tutorial about Render in React Based on a Global State Object

Render in React Based on a Global State Object

3:02 react PRO

We’ll define a simple state object in the entry point of our application. Once the state has been defined, we’ll pass it into our root component as props and replace the static elements in our rendered output with values from the component’s props. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.

react tutorial about Render a React UI with JSX

Render a React UI with JSX

2:25 react

Often times when starting an application, it can be beneficial to render out a static layout to get an idea of what we will be building. Doing this allows us to see exactly how we are going to split our application into individual components. We’ll dive right into JSX by rendering a static version of what our application will look like. We’ll cover the basic syntax of JSX and point out where it differs from html.

react tutorial about Bootstrap a React Application with Yarn & Create React App

Bootstrap a React Application with Yarn & Create React App

2:18 react

In this lesson we’ll bootstrap and React application using Yarn and Create React App through the yarn create command.

react tutorial about Update React Component State Based on External DOM Events

Update React Component State Based on External DOM Events

5:09 react PRO

Most of the time, your components respond to events that occur within the component tree by defining their own handler or by accepting a handler defined by a parent component via props. Sometimes, this isn't enough. In this lesson, we'll rely on lifecycle hooks and good old fashioned DOM events to update state in a React component in response to an event that occurs outside of the component tree.

react tutorial about Cleanly Map Over A Stateless Functional Component with a Higher Order Component

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

4:46 react PRO

In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the key prop on the component for us based on the property name that we specify.

react tutorial about Update State in React with Ramda's Evolve

Update State in React with Ramda's Evolve

4:29 react PRO

In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater function a reusable utility that isn't tied to the React API.

react tutorial about Update Component State in React With Ramda Lenses

Update Component State in React With Ramda Lenses

4:37 react PRO

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

js tutorial about Understand Function Composition By Building Compose and ComposeAll Utility Functions

Understand Function Composition By Building Compose and ComposeAll Utility Functions

6:14 js PRO

Function composition allows us to build up powerful functions from smaller, more focused functions. In this lesson we'll demystify how function composition works by building our own compose and composeAll functions.

js tutorial about Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

Get Deeply Nested Properties Safely with Ramda's path and pathOr Functions

4:03 js PRO

In this lesson we'll see how Ramda's path and pathOr functions can be used to safely access a deeply nested property from an object while avoiding the dreaded checks for undefined at each new property in the desired path.

js tutorial about Create a Reusable Mapping Function with Ramda's Map

Create a Reusable Mapping Function with Ramda's Map

3:52 js PRO

Using the map method of an array is a great way to create new data from an existing array in an immutable way and without writing any loops. The problem is that you need to call it on an existing array instance. In the lesson we'll see how to build our own reusable map utility function using manual currying and then we'll replace it with Ramda's map.

js tutorial about Convert a Promise.all Result to an Object with Ramda's zip and zipObj

Convert a Promise.all Result to an Object with Ramda's zip and zipObj

3:11 js PRO

In this lesson, we'll use Promise.all to get an array that contains the resolved values from multiple promises. Then we'll see how we can use Ramda to convert that array of values into a single object using zip with fromPairs. Then we'll refactor to use zipObj.

js tutorial about Create a Query String from an Object using Ramda's toPairs function

Create a Query String from an Object using Ramda's toPairs function

2:24 js PRO

In this lesson, we'll use Ramda's toPairs function, along with map, join, concat and compose to create a reusable function that will convert an object to a querystring.

js tutorial about Filter an Array Based on Multiple Predicates with Ramda's allPass Function

Filter an Array Based on Multiple Predicates with Ramda's allPass Function

2:24 js PRO

In this lesson, we'll filter a list of objects based on multiple conditions and we'll use Ramda's allPass function to create a joint predicate from multiple, individual predicate functions.

js tutorial about Convert Object Methods into Composable Functions with Ramda

Convert Object Methods into Composable Functions with Ramda

4:44 js PRO

In this lesson, we'll look at how we can use Ramda's invoker and constructN functions to take methods of an object and turn them into reusable utility functions that are curried and accept their object as the last argument. We'll convert a dot-chained string of jQuery methods and create a composed function that can be applied to multiple elements.

js tutorial about Sort an Array of Objects by Multiple Fields with Ramda's sortWith

Sort an Array of Objects by Multiple Fields with Ramda's sortWith

1:58 js PRO

Sorting an array of objects by multiple fields can be tricky. Even worse, the code can be tough to follow and making changes in the future is complicated by conditional logic in the sorting function. In this lesson we'll see how to simplify this using Ramda's sortWith along with ascending and descending. We'll sort an array of objects by multiple fields and the code will be readable and dead simple to change.

js tutorial about Refactor a Promise Chain to Function Composition using Ramda

Refactor a Promise Chain to Function Composition using Ramda

8:37 js PRO

Promise chains can be a powerful way to handle a series of transformations to the results of an async call. In some cases, additional promises are required along the way. In cases where there are no new promises, function composition can reduce the number of dot chained thens you need. In this lesson, we'll look at how to take a promise chain, and reduce it down with function composition.

js tutorial about Refactor to a Point Free Function with Ramda's useWith Function

Refactor to a Point Free Function with Ramda's useWith Function

3:41 js PRO

Naming things is hard and arguments in generic utility functions are no exception. Making functions "tacit" or "point free" removes the need for the extra parameter names and can make your code cleaner and more succinct. In this lesson, we'll create a normal, "pointed" function and then use ramda's useWith function to refactor our way to point-free bliss.

js tutorial about Debug Function Compositions with Ramda's Tap Function

Debug Function Compositions with Ramda's Tap Function

2:48 js PRO

Functional composition is a great way to write declarative code that reads well. But sometimes, you need to get insight into what's happening at different steps in your composition. This is where tap comes in. With tap, we can run code that generates side-effects, like logging to the console, and our data will continue to be passed along, untouched.

js tutorial about Get a List of Unique Values From Nested Arrays with Ramda

Get a List of Unique Values From Nested Arrays with Ramda

5:55 js PRO

In this lesson, we'll grab arrays of values from other arrays, resulting in a nested array. From there, we'll look at multiple ways to flatten the array structure using composition with map and unnest and then refactoring to use chain, AKA flatMap. Finally, we'll add Ramda's uniq function to remove duplicate values.

js tutorial about Create an Array From a Seed Value with Ramda's unfold

Create an Array From a Seed Value with Ramda's unfold

3:05 js PRO

In this lesson we'll look at how you can use Ramda's unfold function to generate a list of values based on an initial seed.

js tutorial about Handle Errors in Ramda Pipelines with tryCatch

Handle Errors in Ramda Pipelines with tryCatch

2:32 js PRO

Handling your logic with composable functions makes your code declarative, leading to code that's easy to read and easy to test. Breaking that up to wrap some risky function in a try/catch block introduces imperative code and makes it harder to maintain that declarative approach. With Ramda's tryCatch function, you can handle errors right in the middle of a composition and leave your code clean and functional. We'll also see how you can use propOr to avoid common "cannot find X of undefined" errors.

js tutorial about Refactor to Point Free Functions with Ramda using compose and converge

Refactor to Point Free Functions with Ramda using compose and converge

3:33 js PRO

In this lesson we'll take some existing code and refactor it using some functions from the Ramda library, most notably, compose and converge. When we're done, we'll have taken a function with a couple of local variables and parameter references and converted it into more streamlined "point-free" or "tacit" functions.

react tutorial about Load Data From a Server with fetch

Load Data From a Server with fetch

4:19 react PRO

We’ll fire up json-server so we can run our application against a server. We’ll take advantage of the fetch polyfill provided by create-react-app and leverage the componentDidMount lifecycle event to load our initial todo list. We’ll also add an error message to our UI in the case that the server is unavailable.

react tutorial about Delete Data on the Server with fetch

Delete Data on the Server with fetch

1:35 react PRO

We’ll use fetch to delete items on the server when the client triggers a removal, and update the UI with a success message once the delete operation on the server has succeeded.

react tutorial about Update data on the Server with fetch

Update data on the Server with fetch

3:09 react PRO

We’ll use fetch and refactor our client-side task completion logic to send an update to the server, and update the UI with a success message once the save has completed successfully.

react tutorial about Show Temporary Messages in a React Application

Show Temporary Messages in a React Application

2:41 react PRO

We’ll add a message object to the application state and use that message to conditionally show a message component. We’ll also use a setTimeout to update our state and hide the message after a specified period of time.

react tutorial about Save Data to the Server with fetch

Save Data to the Server with fetch

2:30 react PRO

We’ll cover posting new data to the server using fetch and the POST http method. We’ll also update the UI with a success message once the save has completed successfully.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?