Week 5 is over! Almost at the half way mark of the program. This week we learned redux-react. Redux is a state management tool that can be used with React and Angular. At the beginning of the week, when our instructor introduced Redux to us. I understood it conceptually i.e. on a high level basis. As we started to work on our lab though, it turned into a different story. I think this was due to how the “work flow” (or should i say code flow) is structured. Setting up redux AKA mapping dispatch and states to props can be overwhelming . It seems daunting and confusing at first because of the initial set up but once you practice and use it, it gets easier and easier.

Important take-away from this week with Redux:
Redux is helpful when you have a large application with many components calling/using the same state. Think twitter, facebook, or a large social blog site. E.g. CRUD functions can be call from multiple area of a website. Websites divided into several different components. No problem! Redux will help you by sending different states to any components you want (just make sure to map it first!) Always remember to set up an initial state then set your rootReducer or Reducer state to the initial state. From there you can call on that state from any components you want. Then you can change the state from any components but make sure you have set up your functions (in this case ‘actions’) in your actions area and map it to your props. Your actions can contain multiple functions/actions that you can send to various components. The actions will tell the reducer to make a copy of the original state, modify that new state and set as a completely new state! WOW!!!

Another important take away from redux is thunk. Thunk is use to fetchData() i.e. API call. At least that’s what I think it does. What thunk does is it creates an action creator that DOES NOT create an object but rather returns a function. Since we are using it with Redux, which only likes plain objects, thunk allows redux to do this. Essentially, it’s just a function that is returned by another function. E.g.
function getUser(){
return function(){
return fetch('/current_user'):
};
};
Redux actions with thunk usually comes in triplets. I.e. Begin, Success, Failure. Begin is the beginning action item which allows redux to fetchData and show loading state of that data. Success is when the fetch is complete and the payload is set and ready to be render/display. Failure is an error catch, in case the GET call fails or server is down; Failure action will handle that state accordingly.

Concepts to improve on:
You guess it! That’s right! If you are thinking to yourself “hmm his definition of thunk seems like it comes straight from a text book or something similar” Well you are somewhat correct! It was 50/50. Conceptually, I think I understand what thunk does and what it can do but I feel like I need to practice and use it more to see the benefits of using thunk/redux when I am writing an API GET calls. That’s it for me this week! ~SOOSH OUT!! YEET!! P.S. I think that sign off is here to stay.