Photo by Sigmund on Unsplash

We’re going to embark on a pretty crazy journey today. We are going to be talking about how to give your single page application CRUD functionality using React Redux.

Just so that were on the same page. Were using rails on our backend: If you want a quick crash course on rails check out the link below.

Rails Crash Course: https://abdulkhan-81904.medium.com/rails-crud-overview-29deb4bd1e5a

And were using react & redux on our front end. Check out the links below.

React JS FAQs: https://abdulkhan-81904.medium.com/react-js-faqs-for-beginners-4a113d5eb7ec

React Lifecycle Methods: https://abdulkhan-81904.medium.com/react-life-cycle-methods-d42e333c12cb

REDUX for beginners: https://abdulkhan-81904.medium.com/redux-faqs-for-beginners-195ed82552cc

I would recommend reading the blogs mentioned above first just to ensure…


What is Redux?

Redux according to the official doc’s “is a pattern and library for managing nd updating application state, using events called “actions”” It helps you manage global state. So that you can call &/or update information through out your application.

Redux can be integrated with any front end but is most commonly used with react. With redux since we have a global location where information is stored we don’t have to worry about lifting state up to parent components.

Redux is immutable in nature. …


Photo by Tudor Baciu on Unsplash

What are Life Cycles?

React has 3 main phases Mounting, Updating, and Unmounting. Lets start with Mounting

Mounting

Mounting means putting elements into the DOM. React has 4 built in components methods that get called when mounting a component.


Photo by Ferenc Almasi on Unsplash

How to create a react app

To create a react app you first start off with npx create-react-app nameofyourap This will create your entire front end of you. Once youa re ready go ahead and type in npm start or yarn start. React comes with yarn. Yarn is nothing more then a package management tool for JS. Upon completion you will have an app that looks like this.


Today we are going to learn about building a SPA (Single Page Application) Crud application using Fetch. We need to be able to send and receive JSON from the DB. This is what allows the CRUD functionality. Keeping this core principle in mind. You will be able to create any kind of application that you want.

Think of this functionality as the HEART of any SPA crud application that you want to build.

C.R.U.D. = Create | Read | Update | Delete

The way this blog is structured we are going to analyze fetch using the code of a prebuilt SPA CRUD application of mine. We aren’t going to…


Step 1) Gem install “corneal “ We are going to use the corneal gem because it sets up the file structure of the project for us. Not only that; it comes with nearly all the gems you need in your gem file. Next we’ll be making a couple a small updates and additions to the gemfile.

Add to gemfile

  • Gem ‘shotgun’ o To allow us to test in real time

• Gem ‘bcrypt’ o For securing & encrypting our passwords

• Gem ‘rack-flash3’ o For getting out errors o Go ahead and add this to the environment.rb file

• require…


GOAL:

Our goal here is to build a content management system (CRUD application) using rails.

Disclaimers:

I’m using windows. If you use mac the only thing that will be different will be the terminal commands. But their substitutes are easily “google-able”. Also I personally use VS code so I’ll be writing from that perspective. Aldo there are enough steps to actually write a book. So for the sake of brevity I’ll be focusing on just the main steps.

Step 0 ) Draw out the relationships

It’s important that you draw out the relationships to truly understand what is going on…

Abdul Khan

A Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store