A Quick Guide To: ...Spread Operator

#reactnative #redux #javascript #react

Hello! ✨

Today we will be discussing the Spread Operator in JavaScript, React + Redux!

We will be going through this itinerary:

What is the Spread Operator?
Why do we use the Spread Operator in React + Redux?
Summary + Recap

Let's get started!
✨✨✨

What is the Spread Operator?

Simply, the Spread Operator takes an iterable element like an array or an object in JavaScript and expands it into individual elements.

Here is a basic example for an array:

// Declaring + Assigning a simple array
let dogs = ['Adri', 'Spike', 'Tito']

// Using the spread operator
console.log(...dogs)
// => 'Adri', 'Spike', 'Tito'

You can see that the spread operator took in the array and individualized each element into its own string (given that they were already strings).

The Spread Operator is a great utility to use to avoid modifying original data and instead returning a new data array with any modifications.

Let's take a look at another example:

let dogs = ['Adri', 'Spike', 'Tito']
// Declaring + assigning variable "dogs" to an array.

let newDogs = ...dogs
// Declaring + assigning a new variable "newDogs" to the contents of "dogs" using the spread operator. 

console.log(newDogs)
// this will return => 'Adri', 'Spike', 'Tito'

Now if we wanted to modify our array + add another dog 'Jamba' we can do something like this:

let dogs = ['Adri', 'Spike', 'Tito']
// Declaring + assigning variable "dogs" to an array.

let newDogs = ['Jamba', ...dogs]
// Declaring + assigning a new variable "newDogs" to the contents of "dogs" using the spread operator.
// Inserting a string of 'Jamba' and wrapping both the spread operator + the string in [] to make it an array.

console.log(newDogs)
// this will return => ['Adri', 'Spike', 'Tito', 'Jamba']

console.log(dogs)
// However, this will still return => ['Adri', 'Spike', 'Tito']

Why do we use the Spread Operator in React + Redux?

First, we use React and/or Redux in a JavaScript to set and update state. Simply, state is the data of an application. State may change when a new user signs up, when a user adds a new item to a list, or when a user favorites a tweet.

Second, state is mutable (meaning it can be changed) but we do not want to modify an original data structure. This is not in good practice! Modification of an array like "dogs", or an object, in a complex application can cause many errors, side effects or bugs. No side effects are good!

Therefore we use the Spread Operator to return a new, modified state; here is an example:

//bookmarkReducer.js

case CREATE_BOOKMARK:
        return {
            ...state, 
            bookmarks: [...state.bookmarks, action.payload]
        }

In this case statement, "CREATE_BOOKMARK", I am returning a new, modified state. I use the spread operator to ~spread~ over my current state into individual pieces (like the first example). I then set my state's bookmark attribute to an array that encompasses another spread operator and injects an action's payload data into that array. Now that my bookmark's attribute is modified and set to a new array "bookmarks", I inject this into my spreaded state. This will ultimately (1) unmodify the original state (2) create and return a new state modified with the action.payload's data.