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 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…
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. …
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.
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 ‘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
Our goal here is to build a content management system (CRUD application) using rails.
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…