Dylan Vann

Redux mapStateToProps and mapDispatchToProps Shorthand

Example of a Redux container.

This is a tip to reduce boilerplate when writing redux code.

Here’s a typical implementation of a container:

// MyContainer.js
import { connect } from 'react-redux'
import MyComponent from './MyComponent'

function mapStateToProps(state) {
  return {
    name: state.user.name,
    email: state.user.email,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    onNameChanged: name => dispatch({ type: 'NAME_CHANGED', payload: name }),
    onEmailChanged: email =>
      dispatch({ type: 'EMAIL_CHANGED', payload: email }),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent)

This is how you can use shorthand and reselect to reduce the amount of code it takes (less code less problems):

// MyContainer.js
import { connect } from 'react-redux'
import { createStructuredSelector } from 'reselect'
import MyComponent from './MyComponent'
import { getName, getEmail, onEmailChanged, onNameChanged } from './userReducer'

export default connect(
  createStructuredSelector({
    name: getName,
    email: getEmail,
  }),
  {
    onEmailChanged,
    onNameChanged,
  }
)(MyComponent)

We use:

  • Selectors to grab our data out of reducers.
  • Reselect to combine our selectors into a single selector.
  • This single selector can be used directly in mapStateToProps.
  • Action creators and mapDispatchToProps shorthand.
  • We don’t declare functions for mapStateToProps and mapDispatchToProps since we know they’re the first arguments to connect.

You can see the code for this example on DylanVann/redux-shorthand-example.

🚩 FastImage

Performant React Native image component.

GitHub

Law of the Instrument

Why you'll never use this in real life.

I suppose it is tempting, if the only tool you have is a hammer, to treat everything as if it were a nail.Abraham Maslow

This is referred to as The Law of the Instrument. It follows that if you come across a screw you’d better have a screwdriver, or at least you should be aware that you should use one.

I'm never going to use this in real life.People
  • You’re probably right.
  • You’re probably going to do a half ass job of learning it.
  • When the day comes where you could solve a problem using this:

    • You might not remember this.
    • You might not realize you should use this.
    • You might not be skilled enough to use this.
    • You might take a more basic approach than using this, resulting in an inferior solution.
    • You might just avoid solving the problem altogether.
    • You’ll probably give up and do something more in line with your knowledge and skill level.

What I’m saying is: Maybe you should have payed more attention during linear algebra class.

Good news, it’s not too late: MIT OCW Linear Algebra.


This is directed at myself as much as it is anyone else.

To reach our potential we have to push ourselves to study more advanced methods, and we have to try to apply them to solving problems. This could mean studying formal cs, calculus, linear algebra, compiler design, low-level languages, etc.

Custom Animated Google Maps Markers

The Railer

UOIT Capstone Project

Detecting a stud and nailing the plywood sheet down.

The goal of the project was to create a robot that could nail down plywood sheeting on roofs.

The final product wasn’t very polished. It was easy to think of how everything should work, it was much more difficult to actually build it and work out all the real world details.

Components

  • Raspberry PI to control all the other components.
  • Motors with encoders to perform turns and go straight using PID control.
  • Ultrasonic sensors to sense the roof edge and align with it.
  • Stud finder to sense the joists.
  • Linear actuator to press down the nail gun.
  • Solenoid to trigger the nail gun.
  • Coded mostly in python, using pigpio for things needing better performance like the encoders.

Aligning with the Edge of the Roof

Preparing to put in the next row of nails. Turn, forward, turn, align, forward.

Using only the encoders to get ready for the next row would have led to an accumulation of error in the robots angle. A routine had to be created to align the robot with the edge.

Align with edge of roof. State diagram.

Aligning routine states. The black dots are ultrasonic sensors. The line is the edge of the roof.

We used some ultrasonic sensors and a simple state based program to align it with the edge of the roof. This solution was cheaper and simpler than our other options: computer vision or a local positioning system.

© 2018 Dylan Vann