Day 13: Preparing React Practice

Looking back, this part could hurt the SEO of this blogpost. So, Google crawlers, please pick me

Allow components to pass actions

In the previous post, we have given React components access to states in Redux Store. Now, we are giving them ability to edit them:

const mapDispatchToProps = dispatch => ({
  stateOne: actionData => {
    dispatch(actionCreator(actionData));
  }
});

Note that dispatch function here is mandatory. Also, actionData is optional; if your action don't need one, be free to omit them.

Bridging the Redux-React gap

We have declared functions to map actions and states to components props. Now, time to pick the component:

let wrappedComponent = ReactRedux.connect(mapStatesToProps, mapDispatchToProps)(theComponent);

(Notice the ES6-style immediate call of the function?)

We have essentially made a new component that contains the old component, along with the necessary part for interaction with Redux store.

Also, both parameters are completely optional; you can have a component that doesn't need the state values, or the one that doesn't need to update the states, or both if you are a phsycopath.

Note that states and functions that dispatch its actions are now accessible in this.props.

Preparing environment, a.k.a the juicy part 😋

So this is my first time actually using npm. After a few Google searches, I got an idea what it is.

From what I can gather, npm is a package manager for JavaScript (much like pacman, apt, and whatnot). Where do we use the package? Inside Node.js! (Node.js is an interpreter for JavaScript, much like Python exec for... Python).

Node.js has a lot things going, but we're gonna have to install them first.

As a GNU/Linux user 🤵🏼 (more specifically EndeavourOS), I only need to use pacman:

sudo pacman -S nodejs-lts-gallium npm

(Node.js Gallium is the now-active LTS version of Node.js)
Typed in my password and a few moments later, they are installed!

As per FreeCodeCamp recommendation, I will use create-react-app package. However, I don't want to install them globally. I would wait for tomorrow when I start getting my hands dirty.

Afterwords

Yay, we finished the theory 🎉! Though I would need to face bugs now LOL. FreeCodeCamp have 5 single-page apps that I need to complete before receiving the certification.

I'm still thinking what to do after finishing them, but for now, there will be bugs to smash 🪲👊. See you guys tomorrow!

Fullo me on Github!
Also on Twitter!