First experience with React & Redux creating a SPA
My first experience with React and Redux and what I thought about the framework.
After reading up on the basics about React I wanted to create a application to learn more and start creating something myself using React. The application I was going to create where going to be a mobile first view of tasks and time tracking from Springloops API. I would use React to fetch from the API and create a summary of tasks and time in a simplistic view.
First impressions of React
First impressions of Redux
I had already started building my application when I started learning the basics of Redux and why you should use it and when. When I first started learning Redux it was a bit hard to grasp how you should structure your project and how Redux works. But after looking through some simple projects built with Redux I started to understand the structure and how your state is stored in a single object passed down to all components that updates only when needed through actions and reducers.
Creating my first Application
Using React for this project was perfect and together with Redux it would create a good and fluent single page application where you can easily look over your time tracking in Springloops.
I first started to layout the structure of my application and decided I will do routes with React router to “pages” or “views” then pass down state from the view to smaller components like dropdowns and lists. But later I used these views to map state to props on my Redux state and then pass it down to smaller components.
When i first started the application i didn’t plan to use Redux to fetch from the api and save to state but after a while when i had 2 - 3 fetch requests in each component the loading time for each component was unacceptable. So i then decided to use Redux to have a single object with my whole state and update only when it’s needed. Instead of using more complex built in React lifecycles to detect when or when not to update the state.
I used Redux to create a store with actions and reducers. In the actions I fetched from the API and passed it down to a reducer that created a state that is available across the whole website and if the content didn’t match it would go back and do the action again then pass it down to create a new state updating the website with new content.
Later I had make my app usable by others i had to make an authentication with the Springloops API luckily Springloops have a simple API authentication with basic authorization username:password in base64. So after you have logged in your username:password will be saved in a cookie as a base64 string that I later use to fetch from the API.
My opinion on React