Intro to React-Redux Application

For my final portfolio project, I had to create an application using the create-react-app command in the terminal. I am going to talk about what I learnt while I was doing this.

At first, React seems complicated, it’s a jump from what you are normally used to and all that information seems like a lot. But as with all other things in code and in life, practice is what helps you in getting the hang of it. Not just that, after a while I was actually quite impressed with how they came up with React. I know there are multiple versions of javaScript, but React is my first and I enjoyed learning about it.

The most helpful guide for you is definitely going to be reactjs.org, it’s their own documentation and it’s actually pretty well written and very easy to understand. So let’s get started.

The create-react-app gives you a file structure similar to this:

>Your-Project-Name
>public
>src
 #App.css
  App.js
  App.test.js
 #index.css
  index.js
  logo.svg
  reportWebVitals.js
  setupTests.js
  .gitignore
{}package.json

The public folder has files that you won’t need to make changes to those. Your work is going to fall in src and if you are using redux, your src should look something like this:

>src
 >actions
  getTodos.js
 >components
  Home.js
  Nav.js
  Footer.js
  TodosContainer.js
  Todo.js

 >reducers 
  todosReducer.js

This isn’t necessary and is mostly just convention.
I set up my backend in the directory above with the help of Rails api.

>Project_Directory
 >project_api
 >project_client

Here, project_api deals with the backend where as project_client deals with the frontend.

With the help of scaffold, you can built your database, model and controller automatically with your controller already filled in and rendering json like it should. I only used one model for my project and plan to add other models in the future.

I wanted to build a project where users can create location based journals as they travel. I got this idea when I travelled places with my SO and there were times where we just couldn’t remember if we went to one particular place or what exactly did we do there. Also I am not exactly the sort of person who has a habit of writing on an actual journal, it just never happens!

This app helps you create journal entries that are location based where you can type in personal things that happened so it’s easier to remember.
For this project, I used leaflet.js and had to type in yarn add react-leaflet to install the dependencies.

This is the home page where the map from leaflet is being rendered along with the pointers

Getting back to code, I used to Redux to connect to the store via thunk (middleware) This makes it easier to add new entries or delete them. The rule is if you find yourself using “props” too often then just add that state to the store and call it from there so there is less of passing props from parent to child.

In the actions/getJournals.js you can make all your fetch calls of getting these entries from backend or “posting” them when you create a new one.

Sample of how it should look:

actions/getJournals.js
export const getJournals = () => {
   return dispatch => {
      dispatch({ type: "LOADING" })
      fetch("http://localhost:3001/journals")
      .then(resp => resp.json())
      .then(journals => dispatch({type: "SET_JOURNALS", journals}))
    }
}

This is how you access all the items in your backend.

reducers/journalsReducer.js
const initialState = { journals: [], loading: true }
const journalsReducer = (state=initialState, action) => {
   switch(action.type) {
   case "LOADING":
      return {
         ...state,
         loading: true
    }
    case "SET_JOURNALS":
       return {
         ...state,
         loading: false,
         journals: action.journals
    }
    default:
    return state,
    }
}
export default journalsReducer

Your reducer is connected to the store and it’s a function that determines changes to an application’s state. It uses the action it receives to determine this change. Redux relies heavily on reducer functions that take the previous state and an action in order to execute the next state.
You can add more cases like “ADD_JOURNALS” or “DELETE_JOURNALS”. These cases are used in the argument ‘type’ in the dispatch function.

You can use these functions in your form or any place where you have decided to add the button functionality that the user can use.

Parent and Child Components

You can pass down props from parents to children components. You can even use callback functions. I connected my List.js (place that renders all the entries) to the store by using the:

import { connect } from ‘react-redux’

and then adding the line :

export default connect(mapStateToProps, {deleteJournal})(List)

to the end. This way we are sending our state to the store and getting the dispatch function (in this example deleteJournal) from the actions.

class ListFiltered extends Component {
   render() {
      const journals = this.props.journals.map( journal =>
      <Journal key={journal.id} date={journal.date} content=       {journal.content} deleteJournal={this.props.deleteJournal} />)
       return (
          <div>
          {journals}
          <p></p>
          </div>
       )
   }
}

Here we are sending the deleteJournal function to the child component.

Because of the above we can do this in our child component (Journal.js)

class Journal extends Component {
handleDelete = () => {
     this.props.deleteJournal(this.props)
     }
     render() {
     const { id, date, content } = this.props;
        return (
           <div>
           <p>{ date }</p> 
           <p> { content }</p>
           <button onClick={this.handleDelete }>Delete</button>
         )
      }
}

Now we can use the delete function in the child component.

Here is what happens when you click on the pointer. You are able to fill the form and that gets added to the list.

There is a lot more to React than this but what I loved about working with it was how easily available the documentary on it is and the countless blogs by people showing how they would do it. And that’s the thing with React, there are so many ways of doing one thing, you just want to select the one that seems neat to you.

Thanks for reading.