What we will cover

We will be building on from our last project but we will cover new features such as

• What is Redux?
• Looking at creating individual pages for our mixes
• Animations

What is Redux?

Redux is a popular library that takes the current state that we have in our React components and keeps it seperately from our React code.

Git Branch

We can work on the project on a sperate git branch. (please note this is optional)

We can do this by running the following commands in the terminal.

git checkout -b name-of-branch

Count up

We are going to animate our
numbers in our design to make it look like we are counting up the numbers on load.

To do this we are going to use a JS library called CountUp.js. We install this library by typing yarn add react-countup in our terminal window.

The way we can use the component is by importing it into our own component file for Count up.

import React from 'react'
import CountUp from 'react-countup'

const Counter = ({start = 0, end, ...props}) => (
  <div className="f1 b orange mb0 lh-1">
    <CountUp start={start} end={end} useEasing={true} useGrouping={true} separator="," {...props} />
  </div>
);

export default Counter

Working with parameters in our router

The react router allows us to use parameters in our URL whose values are set dynamically.

To do this first we need to create a component called Show.js.

import React from 'react'

const Show () => { <div>Show page</div> }

export default Show;

We then import this module into our app.js, so we can use it with our routes. We need to pass in the route parameters so we can access the URL of the current show page.

<Route
    path="/show/:slug"
    component={Show}
     />

What is a slug?

A slug refers to the very end of a URL and refers to a specific page or post.

Using filter

In the project we have an array of mixes with different properties. What the filter function does, is loops through an array to find the one we are looking for. Consider the following code :

const hourMix = mixes.filter(mix => mix.length === 60)

This will only return the mixes that are an hour long. We have looped through the array and run a test mix.length === 60 to find the mixes that meet this test.

Using date fns

Using dates in javascript can sometimes be a little difficult to understand, that’s why we are going to us a js library called date-fns.

To use date-fns we need to first install it in our project.

yarn add date-fns

We then import the helper that we need from the library, in our case it’s the (difference in days helper)[https://date-fns.org/v1.29.0/docs/differenceInDays] .

var differenceInDays = require('date-fns/difference_in_days')

We first need to add the following to packages to our project.

yarn add redux react-redux

We can then import the following modules to our project in our index.js

import { Provider } from 'react-redux'
import { createStore } from 'redux'

Provider

A provider is a component that the data to everything in the app

Create store

A store is our state where we store the data

Using developer tools in our project

let store = createStore(
  mixesApp,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

Action

Actions in redux are payloads of information that send data from your application to the store.

There are two items inside an action an item and payload.

const setMix = payload => {
    type: 'UPPERCASE STRING'
    payload: { 
        ...the data we are passing... 
    } 
}

// we then export this function inside an object
export default{
    setMix
}

• Redux developer tools

What is Redux?

Redux is a way to store the state that we have inside our components and keep it in a single location outside of our react code.

What is a state ?

State is a JS object that contains all of the data that is inside our app.

How do we change our Redux state?

We can update our state by using functions which are called actions.

Where can I learn more?

Redux have very helpful docs if you want to learn more.

Redux Principles

Pure functions

Pure functions, are functions that return the same result when we provide it with the same input.

Immuteable state

When we want to change an object we can make copy of it. Therefore, everytime we want to make changes to our data we create a copy.

This allows us to view the item in several states because we can see at multiple different times also known as time travelling

Reducers

Reducers are functions that take in an action (the thing we want to do) and it goes through it and figures out what we want it to do for us.