Test Clicks On Connected Components In Under 10 Lines of Code

Here’s a fairly benign component, that can give developers pause when its time to write unit tests for your components:  const ClickableButton = props => ( <button onClick={props.doSomething}>Click Me!</button> ) const mapDispatchToProps () => ({ doSomething: dispatch(someFancyAction()) }) export default connect( null, mapDispatchToProps, )(ClickableButton) There is only thing worth testing here: That when we click […]

Write Redux Reducer Tests Fast

Redux may come with a lot of boilerplate, patterns, and libraries, but at its core it’s simple.  A current state and an action go in, new state comes out. Just because the code is simple doesn’t mean it shouldn’t be tested. If you are using Redux in your application, that means your store is a […]

How to Test Async Redux Thunks

In a previous post, you learned how to make HTTP requests inside your redux application. We use redux-thunk, a library that enables you to dispatch functions in addition to flux-style actions. With it, you can dispatch functions to handle more complex cases such as asynchronous operations. But then how do you test them? Testing can be more […]

How to Perform HTTP Requests with React & Redux

Async is one of the toughest problems in front-end development. It’s one of the reasons Redux and React were created. React all started when Facebook had what seemed like a trivial problem: Sometimes, the “unread messages” count in the header and the footer of the page would be different. This Skinner box is so important […]

Which version of JavaScript is “Vanilla JavaScript”?

There are so many different versions of JavaScript floating around, and browser support is always changing. How do you know which features you can use without transpiling or some kind of build step? Correct Answer: ES6 (a.k.a. ECMAS 2015) is supported in all major browsers. In April of 2017, all major browsers added support for […]

Pure Array Modifications: Plain JavaScript vs. Modern JavaScript

When working with Redux or other state managers, you want to keep your code pure. That means no side effects. Instead of updating an array instead you want to return a new copy of the array with the changes applied. This is tricky with JavaScript arrays since it isn’t clear which native functions change the […]

How to Update Content Based on URL params; No Libraries Required

If you’re a frequent user of Netflix or Amazon, then you’re familiar with how they use what they know about you to tailor their platform to your tastes. Personalization is an effective marketing technique. It makes you a more engaged customer, and more likely to get out your wallet. But you don’t have a team of […]

How to Make an AJAX Request Without Using Frameworks or Libraries

There are a lot of JavaScript frameworks out there these days. It makes it harder to choose a front-end development workflow when starting a new project and write code that’s portable between different projects. Also, using a complex framework to solve a simple problem adds unneeded complexity and risk to a project, which makes getting that […]

Building Chrome Extensions: A 15-minute Overview [Video]

How to Remove the Hash From Angular Routes in Rails

When building client-side applications, your URLs are prepended with a hash. Removing this can make your routes more user-friendly and more easily crawled by search engines. Here is how you can remove the hash from your routes in an Angular app built on Ruby on Rails, and use the standard URL structure.