DEV Community

loading...

The React-Redux-Rails Project

mariel
Dev. I love dogs, cookies, and learning new things.
・5 min read

Originally published 10/14/19 on marieldotcode.com

It is currently 3:37am.

This was due at 12:00am.

I am so tired.

But I had to learn so many things.

Concept

Originally, I set out to rebuild my Sinatra project but "upgrade” with what I know now. I planned out all of my models and tables, created new models that were missing the first time, and planned how I wanted the pieces to fit.

Then I started trying to create the frontend . . . and realized that 2 weeks was not enough time for me to have any idea what I was doing.

Trying to balance the Flatiron program with work has been a (useful? educational?) struggle, where sometimes I have managed to get ahead and many times I have fallen behind and had to catch up. I had only gotten to the Redux portion couple of weeks ago and, plot twist, two weeks of studying a couple hours a day here and there isn’t really enough to fit that kind of framework in your head.

I’d done a lot of extra work to help myself understand React, which was confusing and frustrating at first. Like JavaScript, after enough repetition I started to understand what was happening - why we had components, what they did, what updating state meant.

Adding in Redux meant starting back at the beginning. And having no idea what I was doing.

So, I (finally) took the advice my boyfriend (a career software engineer) gave me: go look at the requirements, and build to the requirements. If you have time, add more things. But get what is required done first.

The basic requirements aren’t so complicated on their face - 3 routes, using a Rails API, using redux, etc. Except they are complicated, because React and Redux are complicated to learn and require a lot of moving pieces.

Eventually I settled on creating a form - users should be able to log in, log out, enter information in the form, and see all of the [Things] they’ve made. Just doing that much would check all the requirements.

And it was fine….until I tried making the frontend again.

Rails API

Creating the Rails API was easy-ish at first - we’ve had plenty of practice with Rails, and the syntax for Ruby is user-friendly. After a few google searches, the syntax I needed came back to me.

I wrote a blog post about how to create a Rails API once I had it down pretty well, mostly so I wouldn’t forget how to do those things later when it came time to rebuild.

I needed a rebuild. My first attempt was what the youths call A Hot Mess.

I remembered late Saturday afternoon that the Learn Instruct videos are available. Because of my work schedule, I haven’t been able to attend the live study sessions for our cohort and I forget the extra recordings are available. When I went to look - there’s a 12 part build of an app that satisfies our project requirements. Accepting I (1) still really needed help understanding what was happening and (2) had to start over anyway, I started watching.

Going through the Rails API from the beginning was really helpful - I was more careful about what my controllers did, added proper validations to my models, and learned to use a new serializer. It’s all kind of blurry now (I made 135 git commits on Saturday alone), but I learned a lot and definitely feel more confident in my ability to create, understand, and debug a Rails API.

React-Redux Frontend

Store? Not for shopping.

Dispatch? Not for 911 or the police.

Actions? Okay this one is sort of accurate I guess.

Reducers? Not for making something smaller.

Vocabulary how does it work.

The vocabulary is easily what makes the addition of Redux difficult to understand. Add on top of that the use of actions and reducers and you’re gonna have a bad time. For a while. Possibly hours.

It’s fine.

Going through the demo build was so, so important and helpful. I needed that time to see something built bit by bit, the practice of debugging both with the build and on my own, and the listening to other students and trying to answer questions on my own. It wasn’t even until late Sunday evening that it sank in what exactly mapStateToProps does. The important part is that it sank in. Eventually.

From other tutorials and side lessons I’ve done, I’m familiar with semantic-ui, so I added that to the index.html file. The project’s current state isn’t pretty but it’s better than nothing.

Building out the actions, components, and reducers - over, and over, and over - was so necessary because the repetition is what made it finally start to make some sense. The user-facing result doesn’t look complicated, but it took so many hours and so many files to get it to work.

But that’s good. Because it’s the only way to learn.

The login and logout functionality wasn’t a requirement, but every idea I came up with needed it (I had the project equivalent of writers block) so I went ahead and built that out. I’m glad I did though because now I have an example to use going forward.

Sunday, I made 139 git commits. Again - it is all kind of blurry now - but I have learned more in the last 48 hours than I have in the last couple of weeks, and I think I really just needed these marathon sessions to get it to stick.

At some point I will be writing posts about how to do some of the things I did so I don’t forget, but for now - I’m just glad something works.

Going Forward

What I have right now meets the requirements, but it isn’t what I’d really call finished - I’d like to add the ability to edit and delete records, and I’d definitely like to update the CSS/appearance.

I also have to figure out how to get it deployed. But not right now. It’s 4:00am.

The nice thing about having repos is that the work is there to continue, and the commits are there to see what I did in the past.

There were definitely times in the last couple of weeks I doubted I’d be able to finish this at all. Even though it doesn’t satisfy the perfectionist in me, I am satisfied with how much I have been able to learn, and how quickly I have been able to do it. At the end of the day, that’s what is the most important: being able to learn.

And there is always so much more to learn.

Discussion (1)

Collapse
markerikson profile image
Mark Erikson

Congrats on finishing that!

FWIW, I want to apologize a bit, because it sounds like A) you were being required to use Redux on a project that probably didn't actually need it, and B) while you can put literally any kind of state into the Redux store, we generally recommend that most form state shouldn't go in Redux. So, those probably made it a bit harder, on top of trying to learn just what Redux is and how it works in the first place.

Out of curiosity, what resources were you using to learn Redux? We're starting a major rewrite of the Redux core docs, and I'd appreciate any feedback you could offer on what specific problems you had while trying to learn it (difficult terms, concepts that didn't make sense, what explanations finally made things click, etc).

Also, please check out our new official Redux Starter Kit package. It includes utilities to simplify several common Redux use cases, including store setup, defining reducers, immutable update logic, and even creating entire "slices" of state at once:

redux-starter-kit.js.org