I’ve Cracked the Code, Please Call Tech Support- Episode 28, The Flight of the Function

We are on our way to learning to use Redux with React, and it has been an interesting journey. Things are stacking up, and I’ve managed to find resources to reference, but a lot of people have their own approaches here. I guess I need to find my own, too.

1. Discuss in words something you learned in class today or this week.

Redux is awesome if you know how to use it. Having a state available globally, rather than having to daisy-chain them together is incredibly helpful. I understand that people feel (and rightfully so) that it’s unnecessary for smaller apps, but I can totally see myself using this for everything.

2. What is Redux?

Redux is, in their own words, a predictable state container for JS apps. Combined with React (though it does not require it), React allows for states to be accessed globally, freeing up and making coding much more manageable in these environments.

3. What is ‘Store’ in Redux?

Store is where we keep every state that we want to access. Think “grocery store”. We’re hungry and we want to access food. This is where we go to get it.

4. How is state changed in Redux?

State is changed by dispatching our actions. Everything is broken up into smaller steps with Redux, which is why I think a lot of people shy away from using it. That said, I love that. Keep it separated and it’s a lot easier for me to understand.

We store the state we want, define our action, then dispatch our action. Food (state) was in the grocery store (store), we were hungry (action), so we ate (dispatched) the food.

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

As per flaviocopes.com, simply put, “presentational components are concerned with the look, container components are concerned with making things work”.

A presentational component receives data from props, and focuses entirely on presenting said data.

A container manages and stores it’s own data, using the presentational component to display it.

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

setState is asynchronous, and a callback function can be passed to it in order to be used when setState has finished and re-rendered.

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

mapStateToProps is used often in our work, and it’s very handy. This takes parts of the redux state (think items in our grocery store) and passes them as props to the component that connect is applied to (think putting them in our grocery cart).

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

mapDispatchToProps is a similar deal, but in this case it passes our function as a prop to other components, rather than the state.

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

I. NPM — endlessly helpful, and allows us to easily compile and do many things, such as easily run an active version of our page in the browser.

II. React — helpful, but with a high learning curve. It’s combination of CSS, HTML, and JavaScript are useful, but it’s real strength lies in its component composition and reactive page layout.

III. Redux — complicated, but makes React into what I want it to be. Global states are so much more helpful than local.