
Today I want to talk a little bit about [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) and how it can be used as a fantastic way to manage complex state requirements without reaching for a library or peppering your codebase with multiple [useState](https://reactjs.org/docs/hooks-reference.html#usestate) calls.

In the following example, we are going to look at a users profile card which in the real world, would allow a user to update their first name, last name, email and phone.

We are also going to do this with TypeScript so that we get that sweet sweet type safety that it brings to the table.

All of the code for this example will be available [here](https://github.com/damiensedgwick/useref-demo).

Lets crack on.

To use `useReducer` we must first call it and pass it a reducer function, and an initial state object:

```tsx
const [state, dispatch] = useReducer(handleFormInputChange, {
  firstName: "",
  lastName: "",
  email: "",
  phone: "",
  submitted: false
});
```
The `state` here is pretty self-explanatory, but what is `dispatch` and what does `handleFormInputChange` actually handle?

If we take a look at the latter, `handleFormInputChange` is our reducer function that takes in the current state and an action.

Lets take a look at the code:

```ts
export type Data = {
  firstName: string;
  lastName: string;
  email: string;
  phone: string;
  submitted: boolean;
}

export type Action =
  { type: "UPDATE_FIRST_NAME", value: string }
  | { type: "UPDATE_LAST_NAME", value: string }
  | { type: "UPDATE_EMAIL", value: string }
  | { type: "UPDATE_PHONE", value: string }
  | { type: "RESET_FORM" }
  | { type: "SUBMIT_FORM" }

export const handleFormInputChange = (state: Data, action: Action) => {
  switch (action.type) {
    case "UPDATE_FIRST_NAME":
      return { ...state, firstName: action.value, submitted: false };
    case "UPDATE_LAST_NAME":
      return { ...state, lastName: action.value, submitted: false };
    case "UPDATE_EMAIL":
      return { ...state, email: action.value, submitted: false };
    case "UPDATE_PHONE":
      return { ...state, phone: action.value, submitted: false };
    case "SUBMIT_FORM":
      return { ...state, submitted: true };
    case "RESET_FORM":
      return { firstName: "", lastName: "", email: "", phone: "", submitted: false };
    default:
      throw new Error("Unhandled form input action");
  }
};
```
So our `state` takes the shape of `Data` which is the first part we have declared here, the second part is our `Action` type which will help us when it comes to dispatching events a little later.

Lastly, we have declared our function, this is simply a switch statement that checks the action type, and handles it accordingly. If we were to send an action that we had not declared, it would throw a new error.

So for example, if we send the action type `UPDATE_FIRST_NAME`, the function would return all state that has not been modified, as well as the new state for the input element that has been modified, like so:

```tsx
...
case "UPDATE_FIRST_NAME":
    return { ...state, firstName: action.value, submitted: false };
...
```
Now that we have looked at our reducer function, lets look at `dispatch`.

`dispatch` allows us to use our reducer function to send events and values. In the case of our first name input field, it looks like this:

```tsx
<Input placeholder="First Name" value={state.firstName} onChange={(e) => dispatch({ type: "UPDATE_FIRST_NAME", value: e.target.value })} />
```
So as we can see, whenever `onChange` is called for this input element, we send the action type and the value using dispatch, and our reducer function handles updating the correct piece of state.

If we take a step back and look at our users profile component, it lets us see the whole picture for the component.

```tsx
<ProfileCard>
  <UserDetailsForm>
    <Avatar src={avatar} alt="the users avatar" />
    <FormGroup>
      <Input placeholder="First Name" value={state.firstName} onChange={(e) => dispatch({ type: "UPDATE_FIRST_NAME", value: e.target.value })} />
      <Input placeholder="Last Name" value={state.lastName} onChange={(e) => dispatch({ type: "UPDATE_LAST_NAME", value: e.target.value })} />
      <Input placeholder="Email" value={state.email} onChange={(e) => dispatch({ type: "UPDATE_EMAIL", value: e.target.value })} />
      <Input placeholder="Phone" value={state.phone} onChange={(e) => dispatch({ type: "UPDATE_PHONE", value: e.target.value })} />
    </FormGroup>
    <Button type="button" onClick={() => state.submitted ? dispatch({ type: "RESET_FORM" }) : dispatch({ type: "SUBMIT_FORM" })}>{state.submitted ? "RESET" : "SAVE"}</Button>
  </UserDetailsForm>
</ProfileCard>
```
As you can see, all of the `onChange` handlers and the `onClick` handler are very simple. All we are doing is using `dispatch` to send an action type and a potential value should one be required.

No more tracking multiple input fields with useState and declaring different call handlers for different elements.

The entire form can be handled using one function and one state object.

I also mentioned the use of TypeScript here, but I didn't really explain why it was beneficial.

The reason it is beneficial in this example, is that we would get an error should we try and pass a value along with an event, that did not accept a value.

So if we tried to do:
```tsx
onClick={() => dispatch({type: SUBMIT_FORM, value: "some value"})
```
It would error because the action `SUBMIT_FORM` is not expecting any other value to be sent with the event.

You can visit the demo using this link [useRef demo](https://magenta-raindrop-52445e.netlify.app/)

For further reading, you can check out how `useState` and useReducer` behave differently here: [useState vs useReducer](https://twitter.com/dai_shi/status/1534170089981100032)

useReducer > useState


Today is going to be a quick look at some of the more popular array methods in JavaScript.

Each example will use the same set of data, an array of pet objects with different types of animal, their breed and their name.

So lets dive in.

### Array.prototype.map()
`.map()` Creates a new array which is populated with the results of calling a provided function on every element in the calling array.

This is helpful for many reasons but in our example below, we have used `.map()` to create a new array to store all of our pet names in and we have stored them in a new variable `names`.

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const names = pets.map((pet) => pet.name);

console.log(names); // ['Bruno', 'Bruce', 'Tyson', 'Bobby', 'Paulie']
```

### Array.prototype.filter()
`.filter()` Creates a [shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy) of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

If we imagine that we have just fetched all of our pets from our database. `.filter()` is useful because in the scenerio where we only want to read the data of dogs, as in our example, it allows us to do exactly that. We can also store that data in a new variable such as `dogs` just as we have below.

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const dogs = pets.filter((pet) => pet.type === 'dog');

console.log(dogs); // [{type: 'dog', name: 'Bruno', breed: 'Border Collie'}, {type: 'dog', name: 'Tyson', breed: 'Bulldog'}, {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'}]
```

### Array.prototype.forEach()
`.forEach` Executes a provided function once for each array element.

In our example below, our provided function is a rather trivial one that simply logs out a string to the console. However in a more real world situation (still using our pets), our function might return the last time a pet received a checkup (not currently in our data).

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

function introducePet(pet) {
  console.log(`${pet.name} is a ${pet.breed} (${pet.type})`)
}

pets.forEach((pet) => introducePet(pet)); // Bruno is a Border Collie (dog)...
```

### Array.prototype.slice()
`.slice()` Also returns a [shallow copy](https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy) of a portion of an array into a new array object selected from start to end (end not included) where start and end represent the index of items in that array. **The original array will not be modified**.

In our example we are using `.slice()` to simply return the first element of array and store it in a new variable `firstPet`. We could also use it to return the first 3 or the last 3. The world is our oyster here.

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

const firstPet = pets.slice(0, 1);

console.log(tyson); // [{type: 'dog', name: 'Bruno', breed: 'Border Collie'}]
```

### Array.prototype.sort()
`.sort()` As the name suggests, sorts the elements of an array in place and returns the reference to the same array, now sorted. The default sort order is ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.

We may want to sort our data for various reasons, in our example we simply want to order our pets data alphabetically by their name.

It is worth noting that whilst the majority of array methods with create a new array or a shallow copy, `.sort()` will actually change the order of the array (mutation) so a handy trick if you want to prevent this from happening, is to use slice beforehand to create a copy of the original array order.

```js
const pets = [
  {type: 'dog', name: 'Bruno', breed: 'Border Collie'},
  {type: 'cat', name: 'Bruce', breed: 'Maine Coon'},
  {type: 'dog', name: 'Tyson', breed: 'Bulldog'},
  {type: 'dog', name: 'Bobby', breed: 'English Bull Terrier'},
  {type: 'parrot', name: 'Paulie', breed: 'Macaw'}
];

pets.sort((a, b) => a.name.localeCompare(b.name)) // mutated array
pets.slice().sort((a, b) => a.name.localeCompare(b.name)) // copied array

console.log(pets); // [{ type: 'dog', name: 'Bobby', breed: 'English Bull Terrier' }, { type: 'cat', name: 'Bruce', breed: 'Maine Coon' }, { type: 'dog', name: 'Bruno', breed: 'Border Collie' }, { type: 'parrot', name: 'Paulie', breed: 'Macaw' }, { type: 'dog', name: 'Tyson', breed: 'Bulldog' }]
```
That is it for this article and JavaScript array methods. I would highly recommend taking a look at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) as there is a mountain of knowledge there, waiting to be digested. It is also where I got my array method descriptions from.

A Quick Look At Some Popular Array Methods In JavaScript


We’ve all seen the dire BBC [headlines](https://www.bbc.co.uk/news/technology-62098767), and the accompanying frightening stats. In May Tech Monitor suggested that job vacancies in the IT sector were up by [191%](https://techmonitor.ai/leadership/workforce/uk-tech-jobs-skills-shortage). There really is a problem in our industry but maybe employers and recruiters should look beyond the norm? Norfolk Developers did some digging.

Reading the BBC article more closely, the piece is examining general IT skills across the country as well as more highly qualified roles. [Two million](https://www.bbc.co.uk/news/technology-62098767.amp) UK tech vacancies last year in the industry and a further [12 million workers](https://www.bbc.co.uk/news/technology-62098767.amp) lack ‘essential digital skills’, shouts the article. Though, this could apply as much to a lack of basic office computing skills as a shortage of devs.

As a community comprising 1600 members with almost 500 on our very active [Discord](https://nor.dev/discord), if we know anything, it’s about working within the tech industry. 

## A degree is not a prerequisite

With universities and FE colleges about to open their doors for the new term, not everyone who has a passion for programming and tech will be entering these groves of academe. Discussing this with those within our community, many of these specialists tried uni & college but this wasn’t a fit for them so they left full time education. Some just didn’t think that a degree was necessary for a field in which they were already skilled.

## Community support

Alex Scotton, has never graced a uni or a college with his presence as a student. He had the self taught skills but as he says himself, “my journey into the industry took a long time.” Alex has been writing code since he was 10 and kept on programming.

In common with many within the tech community, imposter syndrome played a large part in his initial lack of success and it was down to a friend’s encouragement that Alex was able to gain a foothold in the industry working in a digital marketing team. From this start he was able to progress rapidly in the industry. Today he works as a freelance web developer,a consultant and organises the annual [nor(DEV): conference](https://nordevcon.com/). 

## A web developer’s point of view

Talking to web developer [Louise Foster](https://louisefoster.co.uk/), she says, “I'm completely self taught. I had an online shop between 2010 and 2017 and I ended up realising I got more of a kick working on the website than I did getting the orders in (the orders were great though as well).”

## A degree works for some

NorDev programmer, Jake Saterlay, has a degree in computer science. In discussion Jake suggested, “You’ll learn a lot about the basics of programming [at college], enough to get you your first job, and then after that you’ll get all the experience you need to accelerate your career”

He also believes that you learn many other skills at uni that’ll help in your career.

“I think an aspect that you get from university that you don’t get from being self taught is working in a team. I had various different group projects at university which helped teach me about key project management skills like delegation and communication.”

## A recruiter’s’ thoughts
Speaking to Rokker Consulting’s Jim Marshall, about the issue, he gives reasons for tech skills shortage and states,  “this is the result of an exponential rise in demand (many more traditional firms, by the nature of how they operate, sell/market and deliver products and services, are now principally technology firms), reduced immigration and a tight overall labour market.” 
 
Jim continues by suggesting, 
 
> “the skills shortage has been exacerbated by the fixed mindset of some hirers; sometimes not even taking the time to look at the backgrounds of their best technologists (many of whom entered the industry by non-traditional routes)”. 
 
> “I am a strong advocate of hiring on potential over proof. The key is creating hiring systems and attitudes that adequately index aptitude, curiosity and growth mindset.”
 
## Looking to the future

Amber Hunt managing director of consultancy [Marshall Wolfe](https://marshallwolfe.co.uk/) believes;

> “as technology evolves at a rapid rate, the challenge is hiring and retaining people with these new skills. Whilst companies continue to seek experienced hires, they now find themselves repositioning to attract new digital talent in order to balance the skills shortage – leveraging this by promoting upskilling, retraining and softer skills, alongside apprenticeships, internships and graduate schemes.”
 
In a bid to deal with the tech skills shortage, Amber is trying to “explore with our clients how they can create a sustainable pipeline of talent for the future and thrive in the current technology ecosystem.”
 
She is a keen advocate of a “more inclusive approach to recruitment and open doors for people from diverse backgrounds.”
 
## Alternative routes into tech

Bootcamps and coding camps are an alternative route into the tech industry. [Codebar](https://codebar.io/workshops/2409) in Norwich, organised by Holly Allen and Rose Bonner, is one way with skilled mentors and experts on hand for advice.
 
Another route is Norwich’s [Tech Educators](https://techeducators.co.uk/), where Leanna Lucas, with a background in retail and film has just gained the skills to [land her first job as a web developer for Aviva](https://techeducators.co.uk/blog/our-first-graduate-gets-hired-by-aviva). Talking to Tech Educator’s MD, James Adams, he recognises many of the difficulties of those trying to enter the industry.
 
“What we are trying to achieve at Tech Educators isn’t about saying a university CompSci degree isn’t of value, of course it is, but that’s one path. It’s about offering fair access to all, access to those who don’t want to learn in the “traditional” academic environment, who feel that three years is too long, or are worried about high and increasing costs of tuition over that period.”
 
## Funding

Talking about funding, Tech Educators recently applied for funds via the LEP. James confirmed,

> “We had the recent LEP led tender for government funded spaces, where not one fully instructor led course was selected. Some learners can do the self paced approach, some need an instructor, again for me, it’s about fair access to all, if we are going to truly drive outcomes that we would call a success.” 
 
James firmly believes that fair access for all can solve many of the industry’s skill shortage problems.
 
It’s not that there isn’t the talent - there is but it needs to be fostered and encouraged. Talking to so many, what becomes very clear is that those in the tech industry have taken different routes to achieve their goals and all of these needed to be acknowledged and nurtured.
 
Check out the Norfolk Developers' Discord channel, for jobs, advice, code discussions and some rather esoteric channels on pets and food.

Going straight to the ♥️ of software development practice and process

Local, national and international speakers and workshops for Norfolk Developers.

Upcoming Events

Latest posts

useReducer > useState

A Quick Look At Some Popular Array Methods In JavaScript

The tech skills shortage

Latest Magazine

February 2020 Conference Edition