The Overview of React/Redux (API using Ruby Rails)

Pulling everything together frontend and backend frameworks.

Lets start with the basics in creating the React/Redux App along with a Rails API

When starting the app I use ‘create-react-app’ command in terminal. This auto-generated the basic layout, it had alot of files, but I clean it up that include App.js and index.js and the start of my application begins.

Moving on in storing my data and using the api. I used the command ‘rails_new_my_project_api’. The ‘-api’ flag create all the files needed for rails app, except for the view folder React will become the front-end to view the data. The structure of Rails magic to create models, controller, and database I used rails g -resource.

The Understanding of React

Props
props allow you to pass data from a parent(wrapping) component to a child (embedded) componet.

State —
Whilst props allow you to pass data down the component
tree (and hence trigger an UI update), state is used to
change the component, well, state from within. Changes to
state also trigger an UI update.

The Understanding of Redux- The flow of Redux: Explain by “https://www.freecodecamp.org/news/understanding-redux-the-worlds-easiest-guide-to-beginning-redux-c695f45546f6/” :

• Unlike setState() in pure React, the only way you update the state of a Redux application is by dispatching an action.
• An action is accurately described with a plain JavaScript object, but it must have a type field.
• In a Redux app, every action flows through the reducer. All of them.
• By using a switch statement, you can handle different action types within your Reducer.
• Action Creators are simply functions that return action objects.
• It is a common practice to have the major actors of a redux app live within their own folder/directory.
• You should not mutate the state received in your Reducer. Instead, you should always return a new copy of the state.

After finishing this project I realize that props and state are very important in React. Only changes in props and/or state set off React to render your components and potentially update the DOM in the browser.