What does Redux do? What is it? Explained

okay ready for Diamond code [Music] what's up everybody welcome to a redox lesson for diving code react and redux are two very popular tools on the front-end development market right now today we're going to talk about redox yep redox by itself react and redux are very good matches when they work together but only by understanding them individually we can work them together even better so what is redox do let's find out in real life we have so many things to do like feeding the cat picking up children and cooking and it becomes harder and harder to remember all of them in our head what if we have a notebook that holds all the information so that we never forget whenever something comes up we write it into the notebook and that solves all our troubles same with a web page a web page can do all sorts of things like buying tickets or booking hotels to manage all those functionalities that uses redux to keep track of important data sounds pretty cool right but hold on is that all of this there's something between initiating than action and actually writing something onto the notebook or say Redux let's try to find that answer by recalling our own thinking process before we write into a note let's imagine a room with a washing machine it's a Sunday afternoon and we're doing our laundry in a public laundry room so that means we need to get back on time before the laundry finishes there are three steps before we write something into our notebook the first step is to put in the clothes and press the start button the second step is to read how many times does it need for the public washing machine to finish the job the third step is to add the current time and the washing machine wait time and finally write down the finished reminder on that notebook now let's review the three steps that we just talked the three steps are step 1 starting the machine step 2 reading the time left on the washing machine step 3 do the math in our own head by adding washing machine time with current time and finally get the finished time to write on to the notebook great now we know what we should do to convert our real-life action into data let's see how redux do this in the exact same way with slightly weirder names and terms for the first step where we performed a behavior of starting a machine it is technically not within the redox cycle but most of the time you need something to trigger the redox to start running for the second step where we read the wait time from the screen of the washing machine redux call it dispatch dispatch in english means to send or to convey this batch conveys information from real life into our reducer for calculation by the way that information that gets dispatched is called an action we'll talk about it later for the third step where we added the current time and the Machine time in our head Redux call it a reducer so reducer handles the calculation to get the end time of the washing machine finally the washing machine end time that we write into the notebook is called state by Redux so state is basically important and dynamic data in real life we call that a note and Redux calls it a state whenever we need to look at the recorded end time we ask for the state just like how we look at a notebook now that we have became familiar with the concept I'm going to introduce some basic syntax to you in dive encode will help explaining concepts on a higher level to help people decide what they are going to dive into in the future this part is to prepare people with relative coding background to dive in code in immediately so if you're not sure what we're talking about just yet you get there soon as long as you dive into relative coding experiences first by pressing the washing machine Start button it's the same as grabbing an HTML button elements and let it trigger a redox dispatch process the dispatch process reads whatever is on the washing machine meter and send it through a JavaScript object Redux cause that object and action this code is sort of hard-coded because we literally put one in a half-hour in the action value key value pair in order to solve that we can pass it in through the dispatch function we call the variable time and use the time in the action value let's look at the reducer reducer has two jobs it initiates the state and they changes the state according to the actions it receives from dispatch what is state again it is dynamic and important data the redox try to manage it's like a notebook in real life in this tote we have two cases of starting the machine and stopping the machine these will potentially change the state when relative actions are dispatched into the reducer by saying do something with the state in this code we're doing things like setting the state endtime value to no or set it to a certain time finally when the program asks for the state like how we ask for data from a notebook we call store Donkin state without laundry long laundry is a key that represents one reducer but in real programming there can be as smart reducers as we want after writing all those producers like laundry grocery go to word etc etc we can wrap them all up using combined reducers just like the first line of the code now that we have explained the concept of redux using washing machine and briefly introduced the syntax are you ready to dive in code

Channel: Dive& Code

Views: 39,503

Keywords: redux, how to use redux, react, how to use react, what is redux, explain redux, libraries, front development, web development, framework, html, state, mvc, model view controller, react.js, redux.js, programming, programmer, self teach, coding, react-redux, react redux, concept, redux concept, free code camp, facebook react, components, flux, graphql, flux vs redux, graphql vs redux, react vs redux

Id: nFryvdyMI8s

Length: 6min 50sec (410 seconds)

Published: Fri Sep 29 2017