Dealing with React-Redux-Rails-API project.
Yeah~! this is my 5th and also final project.
Each project was always challenging. but this is the most tough one I’ve ever done.
The goal of the final project is to create a single page application, using React with Redux for the frontend and a rails backend API for the backend.
First, you need to create a folder that will contain rails API(backend) and React App(frontend). once you created folder you need to open that folder with your favorite editor. I am using VS code.
first you will need to create Rails Backend API using commend below.
rails new (project-name) — api. You must include dash dash api( — api) at the end so that it will not create views files that you will never use. which mean it will work only as API.
then create models using rails g scaffold (name of model) (name of table column):(datatype) (ex: rails g scaffold User name:string email:string…etc)
once you made rails api, then you will need to create React-App under the same parent folder. using commend below
Create-React-App (project-name).
it will create file structure like below
Yes my theme for this project is Golf Course Finder. what my application does basically is allow you to find your favorite Golf Course based on people’s comments or number of likes. and you can add your experiences with your comments as well.
Since Redux with this app, first I needed to add some dependencies.
adding redux, react-redux, redux-thunk, and react-router-dom using commend below
yarn add redux react-redux redux-thunk react-router-dom
once you added you can see this dependencies in package.json
as the app bigger, it’s hard to manage all the state and props flow passing down to components.
with Redux, there is a global state aka. store so it makes components can subscribe to that store to get store data easily.
I have Structured the App with into actions, components and actions, and within them have separate files for each area of the objectives I am dealing with.
with this structures, I could more easily keep track and back and forth while I was building project.
this is my router setting in App.js
I have structured with Home, Index(CoursePage), each courseShow page and CourseNew(adding new Course to Index).
with Actions, you can bring some seed data from Rains backend.
also you will need Create, update or delete. it depends on your design of App. (CRUD).
Reducers
actions will match with this Reducer so this switch comment will be fired with appropriate action.type.
if you have more than one reducer, you should create rootReducer below
this rootReducer allow you to import only this one file instead of using courseReducer and commentReducer. Great!!
once you finished the actions, reducers and routers set up. you can start to build for each of your index, show, new, etc.
happy coding~!
