Having a hard time understanding Redux

First off, yes, React is confusing and major shift in thinking. And then you get Redux, and that is also confusing and a major shift in thinking. Your confusion is normal. But if you work at it, it will get better. But they are both very powerful once you get the hang of it.

In a general sense, I once had to teach a class on basic Redux and I started with this analogy:

Imagine you are sitting at a desk. There is a window where you can see a blackboard with your data. You cannot change your data directly but you can fill out a form to tell the type of action you want (and any extra data needed). You can pass that to an elf that will give it to the person in the other room who will update your data based on rules that you defined.

blackboard = Redux store

window = Redux function getState

form = Redux action - an object with a type prop (string) and opt. data

elf = Redux function dispatch

rules = redux reducers - functions that return a state object

State can never be mutated. The state in a reducer is relative to that leaf in the state tree.

That really doesn’t answer your question. That class was “redux without react”. So the question that everyone asked was, “OK, then how do we use Redux with React?” That was class 2.

So, the point of that FCC problem… You have a React app. You have Redux running at the same time. How do they communicate? In a component, you can get access to the Redux state/store though mapStateToProps. In “pure” Redux you would use getStore to access the state/store, but we don’t do that in React - each component that needs access to the state/store will use a mapStateToProps function to tell Redux what it wants. You get in the entire Redux state/store and format it into the object that you want shallow merged into your component props.

There is also a function (or object) called mapDispatchToProps that will allow you to get access to the Redux dispatch function. I assume you will learn that presently.

They haven’t shown you yet how it all hooks up but for now they are just showing you what his function looks like. Later you’ll do that with a function called connect - it will take in these two function and return a higher order component with which you can wrap your component and now your component magically has access to read from and modify the Redux store.

But yes, this all very confusing and seems pointless at first. Someone once said that you should teach someone Redux. You should teach them React and let them build bigger and bigger apps until they are pulling out their hair with frustration at how hard it is to pass data around. Then you cooly mention Redux - now they’ll understand why it’s worth it to learn Redux.

But stick with it.

3 Likes