FindFurryFriend — Setting Up Redux & CORS (to allow Frontend and Backend communication)

Photo by Krista Mangulsone on Unsplash

Backend — Setup for allowing requests from our frontend

config/puma.rb —

configured the port to localhost 3001 so the backend is using that port and the frontend will use a different port (3000)

config/initializers/cors.rb —

wrote the frontend’s localhost port under origins in order to allow the frontend to make requests to the backend

Gemfile —

run:

bundle install

Frontend — Redux Setup

setup dependencies

run:

npm install redux
npm install react-redux
npm install redux-thunk
npm install --save redux-devtools-extension

src/index.js

import the dependencies we just installed

Reducers Folder

Created Reducers folder with the following files: index.js, petsRedcuer.js and shelterReducer.js

reducers/index.js —

This file combines all the reducers in the reducers folder and exports them all as rootReducer

reducers/petsReducer.js & reducers/shelterReducer.js —

These reducers are switch statements and will eventually contain case statements. However, this is my initial setup so the case statements haven’t been written yet.

Back to src/index.js to finish plugging in redux

Import the combined reducers

Setup the redux store with the create store function (provided by react-redux) and wrap our rootReducer, and devtools (which wraps thunk middleware).

Then wrap our App in provider. Provider gives access to global state, access to the redux store and access to things such as the dispatch method

Below is an image of the whole src/index.js file:

Happy coding ✌️