Ninja Space Content Blog

I've been creating react apps since October 2020 so it's only 9 months and I've only worked with redux for one of my projects so far and I want to work on another project with redux. For this blog post, I'll be highlighting on creating my new react app with create-react-app and redux implementation.

Through the coding bootcamp, I would just "npm install react react-dom react-scripts" in my command line, and "mkdir" my src and public folders and corresponding files to start my react projects. It's the manual way to do it without the extra stuff. I am glad they taught me this way first. This year, I've created two new post-bootcamp projects this way as well.

Today, I am finally creating a "create-react-app" but first in my command line I "sudo npm install -g create-react-app" on my computer this morning to install this globally onto my machine. Then, I made a new folder and in it using the terminal, I typed the following in the terminal: "create-react-app lipstickstain" and as it was installing a lot of files, my MacBook started to get hot right away. I call it "the take-off" as it sounded like being in a plane that's about to take off when it starts running this hot. I had to close my MacBook for awhile to let it cool down.

I use Node so you'll see my terminal commands have "npm" in it throughout my blog post below.

After Cool Down
Alright, I'm back at it again after it cooled down. I've dabbled in redux earlier this year as I was self-teaching myself and have just been learning it through youtube tutorials. However, it's been a few months since so I am going to relearn it again. I'm following along the "Redux Crash Course With React" from Traversy Media's Youtube Channel. As recommended, I'm also installing ES7 React/Redux/GraphQL/React-Native Snippet extension for my VSC.

Coding Steps

1. After I've created a new react app with the "create-react-app" command. I created a 'component' folder under the 'src' folder. Then inside the 'component' folder, I created two files: 'Posts.js' and 'Postform.js'.
2. Shortcuts >>> You can type rcc and then the 'tab' button to quickly get a class component set up or rfc and then the 'tab' button to get a function set-up quickly.
3. React Legacy Update >>> The video said to use "componentWillMount" but that is now legacy.
4. When you are ready to maintain state, implement redux and install their libraries so "npm i redux react-redux redux-thunk"
5. To use redux, I created 2 new folders: actions and reducers. Then, I created the following 5 new files: postActions.js and types.js for 'actions' folder, index.js and postReducer.js for 'reducers' folder and a store.js file! 
6. Extra Important Notes:

• You will need to use Provider in this, which is a react component. It allows us to use redux and react together. You'll wrap <Provider> around the entire app.
• To see the state in the redux extension tools, remember to add the following: + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() to the createStore function. You will need to import "compose" as well. Here is how my entire store.js file looks like with this implementation.

It really seems like I had to create a lot of additional files to just to use redux instead of just using react hooks, but I know the developing world demands it, especially for state management.

I also want to note that other functions had to be imported because you have to create the store and make sure you connect react to redux.

Big issue:
I had the biggest issue when I was deploying my app onto AWS Amplify! My implementation with redux was not working on Safari so it would just show a blank page. I was exclusively testing on Google Chrome so I didn't pay attention to it very much but after an hour of looking it up, it had to do with my middleware. I had to install the 'redux-devtools-extension' library and implement it to my store. Here is what I had to update to in my store.js file: 

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
const composedEnhancer = composeWithDevTools(applyMiddleware(thunk))
const initialState = {};

const store = createStore(
  rootReducer, 
  initialState, 
  composedEnhancer
);

export default store;

Another Big Issue:
I ran into another deployed issue. When you are fetching data while under development on localhost, the browser doesn't throw an error when the route is http versus https. However, upon deployment, this is very crucial. Data will not pull or fetch if you accidentally forgot the 's' in https in your fetch URL from Heroku (which is where I deployed my API).


Another, Another Big Issue:
After fixing the previous two issues, I still wasn't able to pull data on deployment. On localhost, it was working fine. It ended up being an issue with cors. I use Express and Node and this was my back-end issue. Here is how my updated access control code looks like in my back end to fix the issue: 

server.all('*', (req, res, next) => {
 res.header("Access-Control-Allow-Origin", "*");
 next();
});

Finally
My app is now running as expected on my deployed link from AWS Amplify and no longer has a blank page on Safari, data is fetched successfully and no more scary cors red errors in the console! Phew! I hope these notes will help you debug if you run into the same issues as me. Now, it's time to beef up my content and grow my database by using the post form from my front-end UI. Then, I will think of a strategy to promote it somehow. Maybe though social media ads?