Redux — ing

N.Kendrick
3 min readSep 5, 2020
  1. Discuss in words something you learned in class today or this week.

Storing state is important and to not piggy back your props.

2. What is Redux?

Is a state management library, which should allow you to keep your state in sync with changes that occurred.

3. What is ‘Store’ in Redux?

Also known as the “single source of truth”, a centralized repository where you state can be cached. It allows all your different components to use a single location to refer the state, which means you don’t have to update every single one of them anytime you make a change!

4.How is state changed in Redux?

We create “actions” which state what event we are trying to trigger to get the desired result. We then link these actions the a “reducer” which is where the code for that action actually lives and outlines that change to the state. Thought it should be said, the change to the state, really create a copy of the state and alters that, the initial state never changes. We then refer to the “reducer” within a “container” and reference that component we are attempting to alter. We then have to update the refer of the code in the component to the container, so the code associated with the chain of commands is outlined. This seems like a lot of steps to take to make a single change, but it is worth the effort as you will always be able to tell the location of the action, reducer where that action facilitated and the component that references those element. This makes for a easy debugging process and cleaner, easy to read code.

5. What is the difference between a Presentational component and a Container component?

A Presentational component for all intents and purposes a static page. The concerns of the component are visual, not data driven. If they do make references to the state, it pay passed information via props. These are commonly going to be functional components, not class. These components will not have actions associated with them or require a reducer function.

While a Container components is usually going to be driven by data or what duties need to be performed by the code usually based on the state of things. The render of this component will be more dependent on that information and the changes made to these components.

6. What is the second argument that can optionally be passed to setState and what is its purpose?

The second argument is the “callback”, is a way we can make sure the async change made within the “updater”, the first argument in setState is applied immediately, or apply some kind of change related to this change event. Though React’s official documentation discourages its use and states that if you want to make changes, you should use shouldComponentUpdate, since both the callback argument and shouldComponentUpdate will not be applied until after the re-render. Though to make matters more confusing, the shouldComponentUpdate then states you should use a PureComponent instead of a shouldComponentUpdate. Every tool has its function though, so I can’t say, use one over the other.

7. Which (if there is) node library method could you use to solve the algorithm problem you solved last night in your pre-homework.

This weeks homework was more of a plug and play and understanding the redux elements than anything else. There was not logic that needed sorting.

8. Which (if there is) node library method could you use to solve the algorithm problem you solved in class tonight?

See above, unless you classify switch statements, actions, and reducers as a library method.

9. What is your opinion of currently popular frameworks/libraries? List and provide your thoughts.

Node.js (framework) — This make everything possible to me, the built in methods makes things so much easy.

ReactJS (framework) — I really like ReactJS, it allow for fast and easy to read code, that makes a clear combination of JS and HTML and sometime, CSS and Babel, it’s mostly silent partner, is really amazing when you think about what’s doing in the background for you.

Material-UI (library) — this has been so helpful in keeping a visual standard for my code and make the process simple and fast. I love these have done so much work into making your CSS aesthetically pleasing.

--

--

N.Kendrick

A Full Stack Developer. Remember, write the documentation you wish you had had when you started your project. https://highermay.dev/