Not really using Redux if I understand correctly
Closed this issue · 3 comments
Hey, first let me say thank you for taking the time to write your blog posts and share your repo here. Really awesome stuff that has helped me learn React/Redux with network calls.
If I understand Redux correctly, state is read-only, yet you're updating state directly in your components:
I'm confused, shouldn't these state changes be handled in your reducers?
@SophieDeBenedetto I wonder if you could move your state changes out of the components and into your reducers. Or am I missing a strong reason why you have state changes in the components? Thanks for your help!
hey @blakeperdue, so there is a reason to handle state here. Apologies if I miss the mark in my response, but I think you are asking me why cat is a property of this component's internal state and why checkboxHobbies are a property of this component's internal state and why they are being changed here.
So, the state referred to in the code snippet you highlighted is the internal state of this specific component, CatPage, which in turn renders the CatForm component. It is common for components that render forms, or for components that act as containers for form components, to set their own internal state, that is specific only to themselves and their children (passed down as props) to make managing form input collection easier and cleaner. So, just to clarify, the state being set and updated in this snippet is not application state, it is the internal state of the CatPage component only. Changes made to state here do not impact application state.
Making cat and checkboxHobbies part of this component's internal state allows me to write callback functions that fire on my form field changes, updating the cat and checkboxHobbies properties of this component's state when the user fills out form fields. This makes it easier for me to track new information edited in the form. When the user submits the form, the cat's information is already up to date, having been updated via that component's state. I can therefor just pluck the nicely packaged updated cat info from this.state.cat and use that information when I ultimately dispatch the updateCat action here https://github.com/SophieDeBenedetto/catbook-redux/blob/blog-post/src/components/cats/CatPage.js#L69. Otherwise, I would have to go through the tedious process of collecting all the form field inputs on the form submission.
Hope that helps!
Oh, I get it now. The component's internal state for cat is the cat you're editing. It's only when you save the cat that you are actually changing the state of the entire app, and that's where you call this.props.actions.updateCat(this.state.cat); which calls your action which dispatches an event that the store receives and acts upon.
Sorry for my confusion around this. I didn't catch that functionality and thought you were changing the app state (not the component state) each time you altered a cat prop. Thanks for your help clearing this up!