Folder Structure, Middleware and Provider - Redux Framework Tutorial скачать в хорошем качестве

Folder Structure, Middleware and Provider - Redux Framework Tutorial

Folder Structure, Middleware and Provider is a free tutorial by Thomas Weibenfalk from Redux Framework course Link to this course(Special Discount): https://www.udemy.com/course/weiben-r... This is the best Redux Framework Course Course summary: Use Redux to manage state with React Refactor a React web application for using Redux Know how the official library React-Redux works Split components into Presentational and Container components English [Auto] OK welcome back. In this video we're going to create the folder structure we need for implementing redux in our application. We're also going to start by creating our index doc js file and do all the imports that we need to do to implement them wrap our application with redux. So let's start off by creating the folders we need for the application. And we're going to use them for this one where we divide our components into container components and presentational components. I actually did a light version of this in my previous course where we created the app that we're using now. I didn't fully implement it because my thought was that it might be better to not do that in the course where we just wanted to learn the basics or react. So we're going to convert the home and the movie components into one home container one movie container and one presentational container for each of them so we can start off by creating the different folders that we need now. And I'm going to show you all of this when we get there. So first of all we create three different folders in our SIRC in our source folders so create a new folder that's called actions. We also need to create a folder that's called reducers we create a new folder called container's and I suggest we put their actual files in actions. We put the producers in the reduces folder and containers into the containers folder. So yeah you probably guessed that already. And we can actually also create the empty files in these ones for now so we know what files we are going to create. So enter our actions Fuller. We create a new file called index dodgiest. We talk more about this later into our containers folder. We create a new file that's called home QAnd saner Dachis. We also create a file that's called newbie container doctoress and introduce this fall that we create three files we create one that's called in that stockist And we also create a file that's called home underscore reducer dodgiest and the last one is a new file called Move the underscore reduce or yes. We are also going to talk about this more later on how we combine these into the index doc js file. But first we'll check out the index doctoress file for the whole applications. Where are we going to do the different imports we need for applying redux to this. So let's start off by importing some real stuff here. We can actually write redux stuff so we know that's the ones we're importing. So start off by import. We're going to need something that's called a provider from re-act redux. And this is the ones that we installed earlier in the first video we're using now. Import we need something that's called create store and we need something that's called apply middleware and these ones we grab in from redox. So these are from the original readouts the provider is just from the official bindings that's called re-act redux for use with re-act and we also need to import our redux promise middleware that I talked about in the first video also we import from is middleware from reader X promise like so. We also need to import our reducers so import reducers from Doc for that slash reduces like so. And that's all we need to import. And no we have to implement this to get readers into our application. So the first thing we have to do is to apply our middleware redux promise to our store. Firstly why do we need this middleware. Well we're going to use an API for fetching the data from the movie database. And when we're fetching days like this we're using a promise. So we don't know exactly when in time we are going to receive all the movie info. So if we are not using the Rydex promise middle where the action will dispatch immediately before we have received the actual data with the movies. And that's not good. So we need to have this middleware because it will make the action to wait until we have received the data and then dispatch the action. So if we read a little bit more about middleware on the reader side we can see what is some middleware Well it provides a third party extension point between dispatching an action and the moment it reaches the reducer. So this is exactly what we're doing here we're putting our middleware just in between before the action which reduces this middleware will tell the action to wait until the promise has been resolv